0

我有这段代码，它在 div 之间滑出动画。如果一个项目被点击，它的相关内容就会滑出。如果单击另一个项目，则当前内容滑入并滑出新内容。

然而，

var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
      }, function() {
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()})  // hide the element in the animation on-complete callback
                  .css('position','relative'); 
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

但是，一旦已经打开的内容滑回，内容滑出的速度太快了——它需要等到内容完全滑回后才能滑出。这可能吗？

这是我目前正在研究的一个链接（http://goo.gl/s8Tl6）。

提前干杯，R

4

4 回答 4

1

这是我将其作为没有标记更改的直接替代品的看法。您希望在单击菜单项时发生以下三种情况之一：

  1. 如果单击的项目当前正在显示，请将其隐藏
  2. 如果正在显示其他内容，请将其隐藏，然后显示当前项目的内容
  3. 如果没有显示，则显示当前项目的内容
var lastClicked = null;
// here lastClicked points to the currently visible content
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) {
          $('.each-brew.'+animCls).click(function(event){
              if(lastClicked && lastClicked == animCls){
                  // if the lastClicked is `this` then just hide the content
                  $('.each-brew-content.'+animCls).animate(
                                          { left: '-33.3333%' }, 1000,
                                          function() {
                                              $(this).hide();
                                          }).css('position','relative');
                  lastClicked = null;
              }else{
                  if(lastClicked){
                      // if something else is lastClicked, hide it,
                      //then trigger a click on the new target
                      $('.each-brew-content.'+lastClicked).animate(
                                          { left: '-33.3333%' }, 1000,
                                          function() {
                                              $(this).hide();
                                              $(event.target).trigger('click');
                                          }).css('position','relative');
                      lastClicked = null;
                  }else{
                      // if there is no currently visible div,
                      // show our content
                      $('.each-brew-content.'+animCls).show()
                                        .animate({ left: '0' }, 1000)
                                        .css('position','relative');
                    lastClicked = animCls;
                  }
              }
          });
      })(animateClasses[i]);  //  self calling anonymous function
   }
于 2013-02-17T04:09:55.310 回答
0

好吧，我很确定还有其他更简单的可能性，我没有太多时间，但这里有一个工作 jsfiddle：http: //jsfiddle.net/uaNKz/

基本上，您使用该callback功能等待动画完成。在这种特殊情况下，它是complete: function(){...}

$("document").ready(function(){
    $('#ale').click(function(){
        if ($('div').hasClass('toggled')){
          $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
            $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
          }).removeClass('toggled');
        }else{
          $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
        }
    });
  $('#bramling').click(function(){
    if ($('div').hasClass('toggled')){
      $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
        $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
      }).removeClass('toggled');
    }else{
      $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
    }
  });
});

toggled如果 div 展开，我会上课。由于您页面上的动画似乎已损坏，我认为这将是一种更好的方法。但请记住：我的代码不是很好。很快，它可以被重构。它正在工作。

于 2013-02-11T13:40:43.607 回答
0

不要使用切换，而是将“点击”处理程序绑定到您的“.each-brew”div。在处理程序中，首先隐藏内容 div，然后在该动画完成时显示适当的内容。您可以通过承诺或回调来做到这一点。像这样的东西...

 $(".each-brew").on("click", function (event) {
      $(".each-brew-content").show().animate({ left: "0" }, 1000, function() {
          // Get the brew name from the class list. 
          // This assumes that the brew is the second class in the list, as in your markup.
          var brew = event.currentTarget.className.split(/\s+/)[1];
          $(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); });
      });
  });
于 2013-02-17T01:55:49.610 回答
0

我认为事件和观察者会为您解决问题。

在动画完成时设置回调函数以触发事件。

侦听器将首先侦听任何动画事件，然后在触发该事件后侦听完成事件。当完成事件被触发时，执行初始动画 event.run 方法（或任何你想调用的方法）

在 newanimationeventtriger(new_anim) 上的侦听器中等待 x 秒（以消除无限循环 poss），而如果这个 lastevent 触发 done == true{ new_anim.run(); }

于 2013-02-17T04:33:56.690 回答