觸發jquery的滑動自動

這是用於水平使用jquery動畫method.Here用戶需要點擊每個鏈路上以觸發sliding.What我需要的是的divs滑動樣品撥弄觸發滑動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的滑動自動

回答

相關問題