Как добавить эффект затухания при изменении img

Question

Как добавить эффект затухания при изменении img

0

Я просматриваю массив изображений по щелчку и нуждаюсь в двух вещах:

1) Текущее изображение исчезает и новое изображение исчезает (см. Демонстрацию, нажмите вперед)

2) Предотвратите увеличение кликов, если кнопка нажата более одного раза. Я думаю, мне нужно использовать.stop() для этого, я просто не знаю, как это сделать.

здесь jsfiddle: http://jsfiddle.net/8Y6dq/2/

HTML

<figure>
    <img src="coast.png" />
    <figcaption>Photography</figcaption>
    <nav>
        <a href="#">Back</a>
        <a href="#">Forward</a>
    </nav>
</figure>

JQuery

$(function(){
    var images = [
        "water.png",
        "view.png",
        "sunset.png",
        "coastal.png"
    ],
        $img = $("figure img"),
        $i = 0,
        $j = images.length,
        $back = $("nav a").first(),
        $forward = $("nav a + a");


    $forward.click(function(){
        $i = ($i + 1) % images.length;
        $img.fadeOut().prop("src", images[$i]).fadeIn();
    });

    $back.click(function(){
        $j -= 1;
        if($j >= 0) {
            $img.prop("src", images[$j]);
        } else {
            $j += $j + 1;
        }
    });    

});

user2129623 22 фев. 2014, в 17:50

Источник

1

как jsfiddle.net/arunpjohny/7kumE/1 ?
Arun P Johny 22 фев. 2014, в 16:26
0

хм, это работает, но требует двух кликов ..
user2129623 22 фев. 2014, в 16:28
0

preventDefault() - это то, что вам нужно для выполнения 2-й задачи.
Bhavik 22 фев. 2014, в 16:28
0

@ user2129623 нет ... если переход уже выполняется, то щелчок будет проигнорирован
Arun P Johny 22 фев. 2014, в 16:29

Показать ещё 2 комментария

Теги:

jquery

2 ответа

1

Я обновил код для работы только с прямой линией

jsfiddle.net/8Y6dq/3/

Я добавил там jquery-версию. Также добавлен класс, когда пользователь нажимает на ссылку один раз и проверяет его, чтобы решить вашу вторую проблему

Snehal S 22 фев. 2014, в 15:24

Ещё вопросы

хм, это работает, но требует двух кликов ..
preventDefault() - это то, что вам нужно для выполнения 2-й задачи.
@ user2129623 нет ... если переход уже выполняется, то щелчок будет проигнорирован

Arun P Johny · Accepted Answer · 2014-02-22T15-13-00.000Z

Пытаться

$(function () {
    var images = [
        "http://linenwoods.com/test/water.png",
        "http://linenwoods.com/test/view.png",
        "http://linenwoods.com/test/sunset.png",
        "http://linenwoods.com/test/coastal.png"],
        $img = $("figure img"),
        $i = 0,
        $back = $("nav a").first(),
        $forward = $("nav a + a"),
        flag = false;

    //preload all the images
    $.each(images, function (i, src) {
        new Image().src = src;
    })

    $forward.click(function () {
        //return if already a transition is in progress
        if (flag) {
            return;
        }
        $i = ($i + 1) % images.length;
        //start the switch animation
        swicth();
    });

    $back.click(function () {
        //return if already a transition is in progress
        if (flag) {
            return;
        }
        $i -= 1;
        //rollback to last if the current image is the first one
        if ($i < 0) {
            $i = images.length;
        }
        //start the switch animation
        swicth();
    });

    function swicth() {
        //set the flag to true to indicate a transition
        flag = true;
        $img.fadeOut(function () {
            //use a callback to change the src so that the fade in will be visible
            $img.prop("src", images[$i]).fadeIn(function () {
                //set the flag to false to indicate end of transition
                flag = false;
            });
        });
    }

});

Демо: скрипка