JQuery скользить вверх и вниз с анимацией, не остановить скольжения - PullRequest
Новая
       5

JQuery скользить вверх и вниз с анимацией, не остановить скольжения

2 голосов
/ 04 февраля 2010

У меня есть фотография с некоторым содержимым (имя, описание, цена), содержимое находится на ул. в состоянии по умолчанию ul только показывает имя, устанавливая абсолютную позицию ul к нижней части изображения, а затем скрывая переполнение маской div. затем при наведении курсора ul скользит вверх, показывая всю информацию, пока вы остаетесь на изображении. когда вы наведите курсор мыши, он скользит обратно в исходное положение, просто показывая заголовок ... вот как это должно работать. прямо сейчас, когда вы наводите мышь, она скользит вверх и вниз, вверх и вниз навсегда.

вот HTML и стили 

div.banner_product {
    float: left; width:  236px; position:  relative; overflow: visible;
}
div.banner_product ul {
    width:  220px;
    background-color: black;
    font-size: 16px;
    color:  white;
    list-style-type: none;
    position: absolute; top:  230px;

    margin: 8px;
    filter: alpha(opacity=70); /* internet explorer */
        -khtml-opacity: 0.7;      /* khtml, old safari */
        -moz-opacity: 0.7;       /* mozilla, netscape */
        opacity: 0.7;           /* fx, safari, opera */

}
.mask {
position: absolute;
top: 0;
overflow: hidden;
height:  300px;
width:  235px;
}


/*html*/
<div class="banner_product" id="pi1"><img src="image1.jpg" alt="" border="0" height="306" width="235" /><div class="mask">
        <ul id="bd1">
            <li class="name-b"><a href="#">PRODUCT NAME</a></li>
            <li class="text-b">DESCRIPTION</li>
            <li class="price-b">PRICE</li>
        </ul></div>
    </div>

это скрипт: 

$('#pi1')
.bind('mouseover',enterImg)
.bind('mouseout',exitImg)
function enterImg(event){
$('#bd1').animate({"top": "4px"}, 2000);
event.stopPropagation();

}
function exitImg(event){
$('#bd1').animate({"top": "236px"}, 2000);
event.stopPropagation();

}

Ответы [ 2 ]

2 голосов
/ 04 февраля 2010

Я думаю, что каждый раз, когда # bd1 пересекает указатель мыши (который, вероятно, зависает над изображением), он вызывает mouseout, а затем вызывает mouseover, когда он проходит.

Чтобы проверить это, активируйте анимацию, указав в самый низ изображения, а затем сразу же уберите мышь с пути.

EDIT:

Хм ... для меня, если я проверяю, что баннер не пересекает указатель, это помогло, но, конечно, это не исправление.

Одним из решений, по-видимому, является использование метода hover () jQuery вместо определенных событий мыши: 

$('#pi1').hover(
    function (event){
        $('#bd1').animate({"top": "4px"}, 500);
    },

    function (event){
        $('#bd1').animate({"top": "236px"}, 500);
    });

В любом случае работает в webkit. Не проверял IE.

1 голос
/ 21 января 2011 
var state = true;
    $('#pi1').hover(function(){
        if(state){
            $('#bd1').slideDown('slow',function(){
                state = false;
            });
        }
    },function(){
        if(!state){
            $('#bd1').slideUp('slow',function(){
                state = true;
            });
        }
    })

останавливает повторное перемещение вверх-вниз с помощью jquery slideUp () и slideDown () вместе с событиями наведения это на самом деле будет работать везде, где используются события mouseover и mouseout ...

...