Question

我有一个联系表单，当鼠标悬停在按钮上时我想滑出来，只要鼠标悬停在.hoverclass（按钮和表单本身）上，就可以保留表单。但是，我已经完成了让它变成奇怪的东西。

<div id="contact-wrapper">
    <div class="floating-contact-inner hoverclass" id="floating-contact-wrap">
        <div id="contact-btn" class="hoverclass">&nbsp;</div>
        <div id="result"></div>
        <form action="#" method="post" id="floating-contact" >
            <!-- Lalala  -->
        </form>
    </div>
</div>

var jq = jQuery.noConflict();
var floatbox = jq("#floating-contact-wrap");    

jq('.hoverclass').hover(
   function(e){
       if (!jq(floatbox).hasClass('visiable')){
           floatbox.animate({"right":"-294px"}, "slow").addClass('visiable');
       }
   },
   function(e){
     floatbox.animate({"right":"0px"}, "slow").removeClass('visiable');
   }
);

感谢您一看！

Answer 1

Demo - 如果悬停事件使元素可见，则切换回调的顺序将产生您要查找的内容hover(in, out)。使用jQuery stop()函数可以防止动画卡顿。

floatbox.hover(
    function(e){
        floatbox.stop(true).animate({"right":"0px"}, "slow");
    },
    function(e){
        floatbox.animate({"right":"-294px"}, "slow");        
    }
);

这消除了添加和删除类的需要，并依赖hover来确定它的状态

Answer 2

可以让它们进入鼠标悬停和鼠标移动功能。

http://jsfiddle.net/jnzsm2L0/8/

var jq = jQuery.noConflict();

var floatbox = jq("#floating-contact-wrap");
floatbox.mouseover(

function (e) {
    if (!jq(floatbox).hasClass('visible')) {
        floatbox.stop(true).animate({
            "right": "0px"
        }, "slow").addClass('visible');
    }
});

floatbox.mouseleave(

function (e) {
    if (jq(floatbox).hasClass('visible')) {
        floatbox.animate({
            "right": "-294px"
        }, "slow").removeClass('visible');
    }
});

在悬停时滑入，在离开时滑出

2 个答案: