トリガーjqueryのスライドが自動的に

JSFiddle トリガーjqueryのスライドが自動的に

これはjqueryのアニメーションmethod.Hereユーザーを使用してdivsの摺動水平用のサンプルフィドルである私が必要sliding.Whatをトリガするために、各リンクをクリックする必要がありautomatically.Pleaseを与えるスライドトリガすることですボタンクリック機能の中のコードは、スライドをトリガーします。

#left, #right { 
 
position: relative; 
 
float: left; 
 
margin: 0 5px 0 0; 
 
border: 1px solid black; 
 
width: 200px; 
 
height: 300px; 
 
overflow: hidden; 
 
} 
 

 
div.panel { 
 
position: absolute; 
 
height: 100%; 
 
width: 100%; 
 
display: none; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
    jQuery(function($) { 
 

 
$('button').click(function(){ 
 
alert("sssd") 
 
}) 
 
$('a.panel').click(function() { 
 
    var $target = $($(this).attr('href')), 
 
     $other = $target.siblings('.active'); 
 
    if (!$target.hasClass('active')) { 
 
     $other.each(function(index, self) { 
 
      var $this = $(this); 
 
      $this.removeClass('active').animate({ 
 
       left: 0 
 
      }, 500); 
 
     }); 
 

 
     $target.addClass('active').show().css({ 
 
      left: -($(this).width() - ($target.width())) 
 
     }).animate({ 
 
      left: 0 
 
     }, 500); 
 
    } 
 
}); 
 

 
}); 
 
    </script> 
 
    <body> 
 
    <a href="#target1" class="panel">Target 1</a><br/> 
 
<a href="#target2" class="panel">Target 2</a><br/> 
 
<a href="#target3" class="panel">Target 3</a><br/> 
 

 
<button>Trigger</button> 
 
<div id="right"> 
 
<div class="panel" id="target1" style="background:green"> 
 
<p>akhil viswam</p></div> 
 
<div class="panel" id="target2" style="background:red">Target 2</div> 
 
<div class="panel" id="target3" style="background:yellow">Target 3</div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-01-05 akhilviswam

あなたはコードの下にチェックすることがあります。

var count = $('a.panel').length; 
    var index = 0; 
    var myInterval = null; 

    $('button').click(function() { 

    //code to only animate specific slide 
    //$('a[href="#target2"]').click(); 


    myInterval = setInterval(function() { 
     //if all the slides animated, then stop the animation 
     if (index > count) { 
     clearInterval(myInterval); 
     } else { 
     $($('a.panel').get(index)).trigger("click"); //manually click the element one by one 
     index++; 
     } 
    }, 1000); //animate each slide after 1 second 

    });

更新フィドルリンク：http://jsfiddle.net/rs2QK/3894/

出典

2017-01-05 11:36:46 vijayP

ありがとうご回答のため – akhilviswam

私は、コードを変更する方法TARGET2をトリガーする必要があるとし？ – akhilviswam

はtarget2のみです。http://jsfiddle.net/rs2QK/3895/ – vijayP

トリガーjqueryのスライドが自動的に

答えて

関連する問題