javascript - jQuery/CSS 动画 - 用线条和图像连接不同的按钮和表单

Question

我对尝试实现这样的目标有一个疑问:

jQuery animate example

因此，当您将按钮悬停在左侧时，应该在悬停按钮和自定义表单之间绘制线条，就像现在所做的那样，但我无法将中间的图像与左侧和右侧的线条连接起来。有没有更好的选择来制作这样的动画？另外，当点击左侧按钮时是否可以从左到右制作动画？

编辑:

[http://jsfiddle.net/ytfrwkbs]

这是 jsfiddle 上的链接，但请确保扩展容器的宽度，因为此代码不响应。

谢谢。

Answer 1

这是一种实现您想要的目标的好方法，但重复代码较少。

http://jsfiddle.net/ytfrwkbs/8/

您的问题是使用精确的像素测量(手动编码)。我对您的 html 进行了微小的更改，但处理重复结构的一个好方法是获取元素的 .height() 和 .position() 并创建一个通用的基于这些的代码:

$('.b1,.b2,.b3,.b4,.b5').hover(function(){
        var VerticalCenter = $(this).position().top + $(this).height()/2;
        $(".left_dash").dequeue().animate({ top: VerticalCenter },"fast");
        $(".mid_dash").dequeue().animate({top: VerticalCenter - 15, left: '-5px' },"fast");
        $(".right_dash").dequeue().animate({height: VerticalCenter - 15 },"fast");
        $(".right_e_dash").dequeue().animate({top: VerticalCenter },"fast");
        // Remove +1 if you are using an array
        $(".right_form").html(FORMS[$(this).index()+1]);
        $(".b1").css({"background-color":"white","color":"black"});
        // 30px is the size of the button + 3px for arrangement
        $(".mid_form").dequeue().animate({height: $(".right_form").height() - 33 },"fast");
        $(".b1,.b2,.b3,.b4,.b5").not(this).css({"background-color":"black","color":"white"});
});

另一个需要遵循的好规则是将 .dequeue() 添加到 .animate() 调用中。这使得 UI 的响应速度更快，因为事情不会卡在很长的动画队列中。当然，这个队列在很多情况下都很有用，但在涉及导航的情况下，我会说出队是必须的。