Question

我有这个基本脚本，使元素显示onmouseenter，并隐藏onmouseleave。在HTML版本工作正常，但我需要在wordpress中显示它;但在WP中没有用。

Firebug显示以下错误：

未定义sidebar_animate

我该如何解决这个问题？

脚本

<script language="javascript">

    function sidebar_animate(px) {
       $('#sidebar').animate({
       'marginLeft' : px
     });
}
</script>

身体

<div id="sidebar" onmouseenter="sidebar_animate('+180px');" 
  onmouseleave="sidebar_animate('-20px');"
  style="background-color: red; width: 240px; height: 100px; position: absolute; left: -180px;" >
  This is going to move
</div>

Answer 1

如何使用jQuery绑定事件处理程序，以便您的代码全部在一个位置：

<script language="javascript">

//wait for document.ready to fire so elements are available to manipulate
$(function () {

    //setup object to convert the type of event fired to the pixel offset to apply for the event
    var eventToPx = {
        mouseenter : 180,
        mouseleave : -20
    };


    //bind an event handler to the `#sidebar` element for `mouseleave` and `mouseenter`
    $('#sidebar').on('mouseenter mouseleave', function (event) {

        //animate this element's `margin-left` property to the specified number of pixels
        //note that jQuery assumes pixels if you omit units
        $(this).stop().animate({
            marginLeft : eventToPx[event.type]
        }, 500);
    });
});
</script>

以下是演示：http://jsfiddle.net/jasper/mYwqE/

请注意，我在.stop()调用之前向您的代码添加了.animate()。如果新的动画排队，它将停止当前动画，因此如果用户鼠标悬停和鼠标移动该元素很快，动画将不会排队。

请注意，.on()是jQuery 1.7的新版本，在这种情况下与使用.bind()相同：http://api.jquery.com/on

使用jQuery部分显示/隐藏元素

脚本

身体

1 个答案: