0

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

一切都已完成，但唯一的问题是在动画显示对象和鼠标移出隐藏对象时。

工作演示在这里。

使用的 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的元素应该被隐藏，然后在悬停时显示。

4

2 回答 2

0

固定演示在这里

TRICK WRAPPER WIDTH 0 并向右移动元素

#prodShareIconDetails{
width: 0px;
position: absolute;
top: -16px;
right: 10px;
z-index:10;
overflow:hidden;
}
于 2013-06-12T12:00:02.750 回答
0

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

如果我是你，我会将你的动画分成不同的功能。1) 旋转 2) 伸展，3) 不旋转，4) 缩回。接下来，您通过回调将它们串在一起，这样当一个完成时它会调用另一个，但是使用 CSS 转换它有点困难，因为它是基于事件的。jQuery 交通插件非常适合让这一切变得简单。旋转完成后，它调用extend。当鼠标移出时，它会停止所有动画，并根据它的距离收回和展开。

关于显示栏，您实际上希望栏可见（以便用户可以看到它扩展）。要做到这一点，请将 bar 放在另一个 div 中，该 div 将充当类似于“窗口”的overflow: hidden; position: relative;. 然后定位栏position: absolute;，以便当它不可见时，它位于我们“窗口”的可见空间之外。这种“窗口”和“轨道”方法在做滑动动画时很常见。一个例子是Hulu，查看页面中间的“热门节目”和其他滑块。

于 2013-06-12T08:52:50.127 回答