Анимация затухания изображения при нажатии на ссылку привязки в jquery - PullRequest
Новая
       24

Анимация затухания изображения при нажатии на ссылку привязки в jquery

0 голосов
/ 03 ноября 2010

Я совершенно новичок в jquery, и я не нашел именно то, что хотел, поэтому написал сам.Цель состоит в том, чтобы создать анимацию затухания изображения (от изображения A до изображения B) при нажатии на ссылку выше.

В любом случае, его поведение не то, что я хотел бы, кроме ... оно недостаточно плавное при быстром / случайном нажатии.Не могли бы вы сказать об этом пару слов?Спасибо!

Это пример запуска:

Пример JSFIDDLE

CSS: 

...
.overlappingImage {position:absolute; left:0; top:0; display:none}
...

код: 

...
<script type="text/javascript">

        function FadeToImage(event, to_image_name, speed) {

        if (event != null)
            event.preventDefault();

        var currentImgWrapper = $("#dummy");

        var currentImg = currentImgWrapper.find('img');
        if (currentImg != null) currentImg.removeClass("overlappingImage");

        var newImgHTML = '<div id="dummy">' + '<img id="to_upper_image" src="' + to_image_name + '" class="overlappingImage"/>' + '</div>';

        if (currentImgWrapper.html() == null)
            $("#d").html(newImgHTML);
        else $("#d").html(currentImgWrapper.html() + newImgHTML);

        currentImgWrapper.fadeOut(speed);
        $("#to_upper_image").fadeIn(speed);

        $("#to_upper_image").removeAttr('id');
    }

    $(document).ready(function() {
        FadeToImage(null, 'img/1.JPG', 0);            

        $('a').first().click(function(event) {
            FadeToImage(event, 'img/2.JPG', 1000);
        });

        $('a').last().click(function(event) {

            FadeToImage(event, 'img/3.JPG', 1000);
        });

    });

    </script>

</head>
<body>
    <a href="#">CLICK 1</a> <a href="#">CLICK 2</a>
    <div id="d" style="position: relative; margin: 50px">
    </div>
</body>

...

1 Ответ

1 голос
/ 03 ноября 2010

Чтобы сделать анимацию более плавной, вы должны выполнять последующие затухания только после завершения каждого из них: 

currentImgWrapper.fadeOut(speed, function() {
    $("#to_upper_image").fadeIn(speed)
                        .removeAttr('id');
});
...