1

请看这个小提琴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()
});
4

4 回答 4

1

  1. 第一次换mouseenter鼠标click

    $('#one').mouseenter(function() → $('#one').click(function()

  2. 输入一些变量，每次点击都会改变：

    var oneIsPlayed = false

 $('#one').click(function() {
   oneIsPlayed = !oneIsPlayed;
   if (  oneIsPlayed ) {
     //code to stop 
   } else {
     //code to start animation
   }
})
于 2013-11-08T12:46:11.970 回答
1

分解代码：

$('#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()
});

如果要单击一个栏来停止另一个栏上的动画，可以在开始动画调用中添加一个停止方法调用：

例如

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

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

于 2013-11-08T12:46:14.623 回答
1

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

$(文档).ready(函数 () {

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

    });
于 2013-11-08T12:55:55.370 回答
1

尝试

$('#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/

于 2013-11-08T13:02:42.843 回答