Jquery의 지연 CSS 기능?

Question

jquery의 CSS 변경을 어떻게 지연시킬 수 있습니까? 내가 마우스 잎 후 약 2 초에 발생하도록하는 MouseLeave 기능을 필요

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

: 여기 내 코드입니다.

다른 jquery를 사용하여 이미지를 마우스 오버시 확장합니다. 확장 할 때 서로를 덮기 때문에 애니메이션 이미지의 z- 인덱스가 다른 것보다 더 높아야합니다. 그런 다음 마우스가 Z- 인덱스를 떠날 때 정상으로 복귀해야합니다.

위의 코드는 마우스가 사라지 자마자 Z- 인덱스가 변경되므로 애니메이션을 완료 할 시간이 없습니다. 따라서 나는 약간의 mouseleave 함수를 지연시킬 필요가있다. 감사합니다

UPDATE 여기

내 사이트이다 : 필자는 머리에 내 코드를 삽입 http://smartpeopletalkfast.co.uk/ppr6/press

:

$jq("document").ready(function() { 

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

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

}); 

이 코드는 잘 작동하지만, 지연이 없습니다. 왼쪽 상단 이미지 위로 마우스를 가져 가면 제대로 작동하지만 마우스를 놓으면 바로 아래 이미지 아래에 표시됩니다. 감사합니다.

Answer 1

이 시도 : sanon의 솔루션은 위의이보다 더 자연스러운 것을

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

Answer 2

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

이 방법이 유용합니까? :)

Answer 3

http://jsfiddle.net/loktar/yK5ga/

확인 그것이 습관 화재 있도록 신속 통해 마우스를 할 경우 어떻게 내가 변수에 타임 아웃을 할당 한 후 마우스 오버에 그것을 삭제되는 일을하고, 밖으로 하나.

$("document").ready(function() { 
    var imgTimeout; 

    $("img").hover(
     function() { 
      clearTimeout(imgTimeout); 
      $(this).css('z-index','1000'); 
    }, 
    function() { 
     var element = $(this); 
     imgTimeout = setTimeout(function(){element.css('z-index','1');}, 1000); 
    }); 
}); 

Answer 4

setTimeout();

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

의 setTimeout의 코드 (코드 지연) 지연 밀리 초 후에 실행한다. 마우스를 너무 빨리 움직이면 의도하지 않은 변경에 문제가 생길 수 있으므로 mouseenter()에서 시간 초과 조치를 지웠습니다.

Answer 5

참고가 동일한 목적을 위해 .animate을 남용하는 대신 jQuery의 .queue 방법을 사용하기 때문에. 아래

원래 답 :

---

에서는 setTimeout이 갈 수있는 가장 자연스러운 방법이지만, 당신이 당신의 jQuery 기능 체인에 체류하려는 경우, 당신은 시간 0와 함께 애니메이션 기능을 사용할 수 있습니다.

예 : 숫자 CSS를 변경보다는 다른 작업을 수행하려면

$("img").delay(1000).animate({'z-index': 1000},0) 

는, 다음 함수를 만들 필요가 없지만, 그것은 여전히 ​​애니메이션 호출 내에서 발생할 수 :

$("img").delay(1000).animate({zoom:1},0,function(){$(this).src('otherImage.png');}) 

저는 빈 공간 객체 {}를 지정하면 실제 효과로 간주되지 않으므로 효과 대기열에 가지 않으므로 전체 기능을 즉시 실행하기 때문에 확대/축소를 수행합니다.

Answer 6

다음을 시도해보십시오. 당신은 지연이 작동하려면 큐에 CSS 변화를 추가 할 필요가 있으므로

jQuery.fn.extend({ 
    qcss: function(map){ 
     $(this).queue(function(next){ 
      $(this).css(map); 
      next(); 
     }); 

     return this; 
    } 
}); 

Answer 7

지연은 큐의 항목에서 작동합니다. 그런 다음 대기열에서 빠져 나옵니다. 다음 코드는이 보여

$('.pressimage img') 
    .delay(1000) 
    .queue(function(){ 
     $(this).css({'z-index','1'}); 
     $(this).dequeue(); 
    }); 

Answer 8

http://forum.jquery.com/topic/delay-css

테스트와 애니메이션 다음은 CSS 속성을 지연 내 목적을 위해 작동합니다.