Функция отложенного CSS не работает - PullRequest
Новая
       4

Функция отложенного CSS не работает

0 голосов
/ 11 февраля 2011

Я пытаюсь отложить функцию CSS.Вот мой сайт: http://smartpeopletalkfast.co.uk/ppr6/press

Когда вы наводите курсор на верхнее левое изображение, оно расширяется, чтобы покрыть изображение под ним.Я использовал приведенный ниже код (он находится в заголовке страницы), чтобы изменить его z-индекс, чтобы изображение, которое расширяется, всегда было видно над любыми другими: 

$("document").ready(function() {   
    $(".pressimage img").mouseenter(function() {
        $(this).css('z-index','100');
            });
    $(".pressimage img").mouseleave(function() {
        $(this).css('z-index','1');
            });
});

Этот код работает, но как только вы щелкаете мышью-из изображения изменяется его z-индекс, поэтому он не остается видимым при изменении его размера обратно в миниатюру.Мне нужно, чтобы z-индекс возвращался к 1 после завершения анимации, или чтобы изменение z-индекса имело задержку около 1/2 секунды.Я подумал, что 2-е решение будет проще.

Я пытался использовать следующее: он устанавливает z-индекс на 100, но никогда не возвращает его обратно на 1. 

$("document").ready(function() {
    var timer;
    $(".pressimage img").mouseenter(function() {
        $(this).css('z-index','100');
        clearTimeout(timer);
    });
    $(".pressimage img").mouseleave(1000,function() {
         timer = setTimeout(function(){
            $(this).css('z-index','1');
         }, 500);
    });
});

Спасибо

ОБНОВЛЕНИЕ.Я публикую это здесь, так как вы не можете видеть код в комментариях.Вот мой фактический код с вашим предложением.Jq используется, чтобы избежать конфликта версий jquery, он отлично работает для других js на моем сайте.

$jq("document").ready(function() {
    $jq(".pressimage img").mouseenter(function() {

        $jq(this).stop().animate({
            width: 260
            });
    });
    $jq(".pressimage img").mouseleave(function() {
        $jq(this).stop().animate({
            width: 130
            });
    });
});


$jq("document").ready(function() {
    var timer;
    $jq(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','100');
         clearTimeout(timer);
    });
    $jq(".pressimage img").mouseleave(1000,function() {
        var that = $jq(this);
         timer = setTimeout(function(){
            that.css('z-index','1');
         },     500);
    });
});

Код работает по большей части, но иногда оставляет изображения с z-индексом 100. Спасибо

Ответы [ 2 ]

2 голосов
/ 11 февраля 2011

Внутри settimeout $ (this) не будет ссылаться на элемент. Сделайте ссылку на это вне функции тайм-аута, и обратитесь к ссылке, когда внутри функции.

http://jsfiddle.net/yK5ga/2/

Первый ответ Измените его на 

    var that = $(this);
     timer = setTimeout(function(){
        that.css('z-index','1');
     }, 500);

Со вчерашнего дня у меня это было в скрипке js, возможно, это упустили из виду, потому что я действительно не отформатировал его так хорошо, как мог.

Ответ на обновление

Вы пытались объединить их в одну и ту же функцию?

http://jsfiddle.net/yK5ga/3/

в нынешнем виде у вас одно и то же событие, выполняющее разные вещи, связанные с одним и тем же элементом.

Обновленный код 

$("document").ready(function() {
    var timer;
    $("img").mouseenter(function() {

        $(this).stop().animate({
            width: 260
        });

        $(this).css('z-index','100');
        clearTimeout(timer);
    });
    $("img").mouseleave(1000,function() {
        var that = $(this);

        $(this).stop().animate({
            width: 130
        });

         timer = setTimeout(function(){
            that.css('z-index','1');
         }, 500);
    });
})
0 голосов
/ 11 февраля 2011

Кен Редлер ответил здесь:

Задержка функции CSS в Jquery? 

$("document").ready(function() {
    $(".pressimage img").mouseenter(function() {
        $(this).css('z-index','1000');
            });
$(".pressimage img").mouseleave( function(){
    var that = this;
    setTimeout( function(){
      $(that).css('z-index','1');
    },500);
 });
});
...