Частично показывает / скрывает элемент с помощью jQuery - PullRequest
Новая
       24

Частично показывает / скрывает элемент с помощью jQuery

1 голос
/ 07 марта 2012

У меня есть этот основной скрипт, который заставляет элемент показывать 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>

1 Ответ

3 голосов
/ 07 марта 2012

Как насчет связывания обработчиков событий с 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

...