Question

请看这个小提琴http://jsfiddle.net/rabelais/4X63B/3/

在这个小提琴中，当一个人在酒吧盘旋时，动画开始和停止。我想知道如何更改此Jquery代码，以便动画在点击时启动和停止？此外，当一个动画启动并且用户点击另一个栏时，它将暂停。在每个动画结束时，将显示一个刷新按钮以重置动画。

$('#one').mouseenter(function(){
    $('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
        $("#refresh-1").show();
    })
});

$('#refresh-1').click(function(){
    $('.alt0').width(0);
    $(this).hide();
})

$('#one').mouseleave(function(){
    $('.alt0').stop()
});

Answer 1

首先将mouseenter更改为鼠标click

$（'＃one'）。mouseenter（function（）→$（'＃one'）。click（function（）

输入一些在每次点击时都会改变的变量：

var oneIsPlayed = false

 $('#one').click(function() {
   oneIsPlayed = !oneIsPlayed;
   if (  oneIsPlayed ) {
     //code to stop 
   } else {
     //code to start animation
   }
})

Answer 2

分解代码：

$('#one').mouseenter(function(){
  $('.alt0').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-1").show();
 })});

这是鼠标进入元素时启动动画的部分。您可以更改它，以便通过将鼠标单击更改为单击鼠标来启动动画：

$('#one').click(function(){
  $('.alt0').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-1").show();
 })});

您可以对停止动画组件执行相同的操作：

$('#one').click(function(){
 $('.alt0').stop()
});

如果你想在一个栏上点击停止动画，你可以在开始动画调用中添加一个停止方法调用：

e.g。

$('#two').click(function(){
  $('.alt1').animate({width: $(this).width()},  
  ($(this).width())/2*1000,"linear",function(){
  $("#refresh-2").show();
  $('.alt0').stop();
 })});

看来你现在没有为我加载jsfiddle，所以我无法测试。但我希望能让你朝着正确的方向前进。

Answer 3

点击该div后，应用动画。为该动画提供一些持续时间，当持续时间结束时，您可以获得其回调，然后删除该样式。

$（document）.ready（function（）{

        $('#service').click(function () {
            $("#ServiceSublist").animate({opacity: 0.25,
            left: "+=50",
            height: "toggle"
        }, 1000, function() {
            alert("amination complete");
        });
        });

    });

Answer 4

尝试

$('#one').on('click', function () { //when first is clicked
    $('.alt1').stop();  //stop second animation
    $('#two').removeClass('active'); //remove seconds active class

    if ($(this).hasClass('active')) { //check if clicked item has active class
        $('.alt0').stop(); //stop animation
        $(this).removeClass('active'); //remove active class

    } else { //if not active or animating

        $(this).addClass('active'); //add active class
        $('.alt0').animate({ //start animation
            width: $(this).width()
        }, ($(this).width()) / 2 * 1000, "linear", function () {
            $("#refresh-1").show();
        });
    }

});


$('#refresh-1').click(function () {
    $('.alt0').width(0);
    $(this).hide();
})

同样为第二个栏做同样的事情。如果你不希望另一个栏在点击其他栏时停止动画

只需从代码

中删除该部分即可

 $('.alt1').stop();  //stop second animation
 $('#two').removeClass('active'); 

 $('.alt0').stop();  //stop firstanimation
 $('#one').removeClass('active');

完整示例http://jsbin.com/UseTIji/1/

单击div切换动画？

4 个答案: