Отложенная функция CSS не работает

Question

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

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

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

Этот код работает, но как только вы мышь-офф изображение его z-index изменяется, поэтому оно не остается видимым при изменении размера изображения до миниатюры. Мне нужно, чтобы z-index возвращался к 1 после завершения анимации или для изменения z-index имел задержку около 1/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); 
    }); 
}); 

Благодаря

UPDATE. Я размещаю это здесь, так как вы не видите код в комментариях. Вот мой фактический код с вашим предложением. 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); 
    }); 
}); 

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

Answer 1

Ответил здесь Кен Redler:

Delay CSS function in 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); 
}); 
}); 

Answer 2

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

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); 
    }); 
})