как удерживать курсор мыши / навести курсор на скрытый div

Я пытаюсь объединить 2 эффекта в сетке изображений: 1, где изображение растет внутри кадра, когда мышь наводит на него курсор, и возвращается обратно, когда мышь покидает кадр, а также для полупрозрачного div, который появляется над изображением со ссылками на другие места.

Код, который я использую для увеличения изображения, находится здесь:

$(function () {
//the size of the image when hovered over, originally 200/0/0
$('#container img').hover(

function () {
    var $this = $(this);
    $this.stop().animate({
        'opacity': '1.0',
            'height': '500px',
            'top': '-66.5px',
            'left': '-150px'
    },
    //this following number defines speed of animation enlargement ( in ms)
    20);
},

function () {
    //the size of the image when left alone
    var $this = $(this);
    $this.stop().animate({
        'opacity': '0.5',
            'height': '400px',
            'top': '-66.5px',
            'left': '-150px'
    },
    //this following number defines speed of animation back to normal ( in ms)
    700);
});
});

а код полупрозрачной маски, которая на самом деле является скрытым div, содержащим ссылки, находится здесь:

$('.lbwrap.1').hover(function () {
$('.over').fadeIn();
}, function () {
$('.over').fadeOut();
});

рабочая демонстрация здесь (ПРИМЕЧАНИЕ, только третье изображение в верхней строке имеет div на месте): http://jsfiddle.net/9wumj4nq/

Проблема, с которой я столкнулся, заключается в том, что когда div появляется над изображением, мышь перестает зависать, а это означает, что изображение внизу сжимается до своего исходного размера. Как сделать так, чтобы нижнее изображение было увеличено, пока закрывающий div на месте?

большое спасибо


jquery hover zooming hidden
person awnine    schedule 19.11.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что вы привязываете события к img. Не делай этого. Свяжите свое событие с контейнером, т.е. div с классом lbwrap в вашем случае.

Соответствующий код jQuery:

$('.lbwrap').hover(function () {
    $(this).find('.over').fadeIn();
}, function () {
    $(this).find('.over').fadeOut();
});

А также:

$('.lbwrap').hover(
    function () {
        var $img = $(this).find("img");
        $img.stop().animate({
            'opacity': '1.0',
                'height': '500px',
                'top': '-66.5px',
                'left': '-150px'
        },
...

Демо-скрипт: http://jsfiddle.net/abhitalks/9wumj4nq/2/

.

Лучший вариант:

Ни в коем случае не используйте для этого jQuery. Вы можете использовать переходы CSS3. Переходы CSS более эффективны, чем анимация на основе javascript.

Соответствующий CSS:

lbwrap a img {
    transform: scale(1);    
    transition: 500ms all;
    opacity: 0.5;
}

div.lbwrap:hover img {
    transform: scale(1.5);
    opacity: 1;
}

div.lbwrap:hover .over {
    display: block;
}

Демо-скрипт: http://jsfiddle.net/abhitalks/9wumj4nq/1/

.

person Abhitalks    schedule 19.11.2014
comment
Большое спасибо. По какой-то причине версия CSS работает медленнее и неравномерно в моем браузере (Chrome, Windows 7), но полезно знать для будущего использования, что CSS может создавать анимацию. - person awnine; 19.11.2014
comment
@awnine: использование css также избавит вас от большого количества запутанного кода js. упростить себе жизнь и упростить понимание и отладку. - person Abhitalks; 19.11.2014