Question

在悬停图像时处理任务，我必须旋转图像然后一旦图像旋转完成，我必须为另一个对象设置动画，然后在鼠标移出时将初始图像旋转到其原始位置，然后第二个对象应该朝着它的初始位置动画然后隐藏。

每件事情都已完成，但唯一的问题是动画显示对象和鼠标移出隐藏对象。

在此处使用 DEMO 。

使用的javascript是

function rotate(degree,el,direction) {
          var interval = null,
          counter = 0;
          interval = setInterval(function(){
            if (direction == "anti_clockwise" ? counter >= degree : counter <= degree) {
              console.log(counter);
              el.css({
                MozTransform: 'rotate(-' + counter + 'deg)',
                WebkitTransform: 'rotate(' + counter + 'deg)',
                transform: 'rotate(' + counter + 'deg)'
              });
              if(direction == "anti_clockwise"){
                counter = counter - 1;
              }else if(direction == "clockwise"){
                counter = counter + 1;
              }
            }
            if (counter == degree && direction == "anti_clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"39px"},"slow");
            }
            if (counter == degree && direction == "clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"200px"},"slow", function(){

              });
            }
          }, 10);
      }
      $("#prodShareIcon").mouseover(function() {
        rotate(-39,$(this),"anti_clockwise");
      }).mouseout(function() {
        console.log(1);
        rotate(39,$(this),"clockwise");
      });

有人可以帮我理解我做错了吗？

最初应隐藏ID为 prodShareIconDetails 的元素，然后在悬停时显示。

Answer 1

这不是一个微不足道的问题。我的猜测是，在悬停时你需要旋转图标，完成该动画后，条形图开始向外延伸。每当鼠标离开时，整个过程以相同的顺序展开。目前，如果你离开早期或中期动画，有时会陷入完全破碎状态，这是非常不好的。

如果我是你，我会将你的动画分成不同的功能。 1）旋转2）延伸，3）不旋转，4）缩回。接下来，您通过回调将它们串在一起，这样当一个完成时它会调用另一个，但是使用CSS转换它会因为基于事件而变得更加困难。 jQuery transit插件非常适合轻松实现。旋转完成后，调用extend。当mouseout发生时，它会停止所有动画，并根据它获得的距离，缩回和展开。

关于显示条形图，您实际上希望条形图可见（因此用户可以看到它延伸）。要完成此操作，请将栏放在另一个div中，该div将充当overflow: hidden; position: relative;的“窗口”。然后定位条position: absolute;，以便当它不可见时，它位于我们“窗口”的可见空间之外。这种“窗口”和“轨道”方法对于进行滑动动画是常见的。一个例子是Hulu，查看页面中间的“热门节目”和其他滑块。

Answer 2

修正了DEMO就在这里

TRICK WRAPPER WIDTH 0并正确移动元素

#prodShareIconDetails{
width: 0px;
position: absolute;
top: -16px;
right: 10px;
z-index:10;
overflow:hidden;
}

在动画，动画和隐藏时显示

2 个答案: