Изменение размера изображения Jquery - PullRequest
Новая
       29

Изменение размера изображения Jquery

2 голосов
/ 15 июля 2011

У меня есть горизонтальный набор из 4 изображений.Функция изменения размера работает при наведении мыши.Это означает, что если я перемещу мышь очень быстро или медленно по этим изображениям, они все изменят размер.Из-за этого мне нужно, чтобы пользователь удерживал мышь над данным изображением не менее 1,5 с, а затем продолжил изменение размера.Это неправильный код: 

$('a img').mouseover(function(){
            $(this).delay(1500).animate({
                width: "315px",
                height: "225px",
                marginLeft: "-50px"
            }, 1500 );
        });
        $('a img').mouseout(function(){
        $(this).animate({
            width: "210px",
            height: "150px",
            marginTop: "0px",
            marginLeft: "0px"
        }, 500 );
        });

Ответы [ 3 ]

2 голосов
/ 15 июля 2011

вы можете использовать setTimeout и clearTimeout для этого:

также .hover () - это ярлык в jQuery для одновременной обработки mouseOver и mouseOut. 

var TimeoutHandler = 0;
var ImageToAnimate = null;

function AnimationIn()
{
    // animate ImageToAnimate 
}

function AnimationOut(image)
{
    // animate image
}

$('a img').hover(function()
{
     clearTimeout(TimeoutHandler );
     ImageToAnimate = this;
     TimeoutHandler = setTimeout(AnimationIn, 1500);
}, function()
{
     AnimationOut(this);
});
1 голос
/ 15 июля 2011

Я бы использовал .setTimeout()

$('a img').mouseover(function(){
        var imgElement = $(this);
        var timeoutID = window.setTimeout(
        function(){ 
            imgElement.animate({
                width: "315px",
                height: "225px",
                marginLeft: "-50px"
            }, 1500 );
         }, 1500);
         imgElement.data("timeout", timeoutID);
    });
    $('a img').mouseout(function(){
        var imgElement = $(this);
        var timeoutID = imgElement.data("timeout");
        window.clearTimeout(timeoutID);
        $(this).animate({
            width: "210px",
            height: "150px",
            marginTop: "0px",
            marginLeft: "0px"
        }, 500 );
    });
1 голос
/ 15 июля 2011

Я не уверен в точной логике, которую вы хотите, но вот один из способов сделать это. Я не подключал реальную анимацию, а просто показал, когда она сработает.

HTML: 

<div class="container">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
</div>
<div id="result">
</div>

JS: 

(function() {

    var myTimer = null;

    function animate() {
        $("#result").append("go, ");
    }

    $(".container").mouseenter(function() {
        if (!myTimer) {
            myTimer = setTimeout(function() {
                myTimer = null;
                animate();
            }, 1500);
        }
    });
    $(".container").mouseleave(function(){
        if (myTimer) {
            clearTimeout(myTimer);
            myTimer = null;
        }
    });
}());

Это можно сделать чуть более надежным, проверяя, была ли мышь по-прежнему над iamges, прежде чем запускать анимацию, на случай, если событие mouseleave было как-то пропущено.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/jfriend00/9q36R/

...