Jquery, как: сначала fadeout нажал div, потом остальные

0

HTML

<div id="wrapper">
<div class="test1">
    <img src="x-led.png">
</div>
<div class="test2">
    <img src="x-led.png">
</div>
<div class="test3">
    <img src="x-led.png">
</div>
</div>

Jquery

<script>
$('#wrapper img').click(function() {
var to = 10000;
var from = 1000;
var number1 = Math.floor(Math.random()*(to-from+1)+from);
var number2 = Math.floor(Math.random()*(to-from+1)+from);
var number3 = Math.floor(Math.random()*(to-from+1)+from);

$('.test1').fadeOut(1000, function() {
    $('.test1').html('You Won: ' + number1).fadeIn(3000);
});
$('.test2').fadeOut(1000, function() {
    $('.test2').html('You Won: ' + number2).fadeIn(3000);
});
$('.test3').fadeOut(1000, function() {
    $('.test3').html('You Won: ' + number3).fadeIn(3000);
});
 });
 </script>

Здравствуйте. Я хочу спросить, как сделать, во-первых, затухание и fadein щелкнули DIV, а после остальных div?

И, возможно, это может быть сделано более компактным с циклами (для, пока) или что-то еще, потому что я не считаю его нормальным делать это.

Извините, я новичок в javascript, но я программист php.

  • 0
    Просто на голову, это не Java, а Javascript (точнее, jQuery). Между этими двумя понятиями есть большая разница, поэтому вы можете перефразировать ваш пост и удалить тег Java. О, и «циклы» называются «петлями». Я знал, что вы имели в виду, но не все будут знать, поэтому в будущем вам, вероятно, повезет больше, если использовать правильную терминологию.
  • 0
    Извините, я сказал, что я новичок в этом, так что я действительно не знаю эту терминологию. Я поменяю теги.
Показать ещё 1 комментарий
Теги:

4 ответа

1
Лучший ответ

Ну, ответ @Dryden Long подходит для проблемы, представленной, но она довольно глубоко гнездится, как только мы начнем добавлять больше div. Другое решение (предположим, что каждый div имеет атрибут data содержащий соответствующее число. Еще более подходящим образом сохранить номер в объекте памяти, а не прикреплять его к DOM) полагается на итерацию по элементу siblings():

var $clickedImg = $(e.target);
var $clickedDiv = $clickedImg.parent();
var $siblings = $clickedDiv.siblings();

$clickedDiv.fadeOut(1000, function () {
    $clickedDiv.html('You Won: ' + $clickedDiv.data('num')).fadeIn(3000, function () {
        $siblings.each(function (i, e) {
            var $sib = $(e);
            $sib.fadeOut(1000, function () {
                $sib.html('You Won: ' + $sib.data('num')).fadeIn(3000);
            });
        });
    });
});

См. Http://jsfiddle.net/Palpatim/qk4Ba/ для демонстрации.

Поделиться
  • 0
    +1 Да, это гораздо лучшее решение на долгосрочную перспективу. Я пошел по «более простому» маршруту, но ОП должен выбрать его как правильный ответ, если он его понимает.
  • 0
    Большое спасибо. Работает как шарм. +++++++
0

Вот мое решение. Он масштабируется, основываясь на том, что у вас есть много тестовых div, и будет fadeOut и fadeIn в последовательности, начиная с вашего первоначального щелчка.

HTML:

<div id="wrapper">
 <div class="test1"><img src="x-led.png"></div>
 <div class="test2"><img src="x-led.png"></div>
 <div class="test3"><img src="x-led.png"></div>
</div>

JS/JQuery:

var winMin = 1000;
var winMax = 10000;
function fadeAfterSequence(element) {
 element.fadeOut(1000, function() {
  var winAmmt = Math.floor(Math.random() * (winMax - winMin + 1) + winMin);
  element.html('You Won: ' + winAmmt);
  element.fadeIn(1000, function() {
   fadeAfterSequence(element.next());
  });
 });
}
$(document).on('ready', function() {
 $('#wrapper img').on('click', function() {
  fadeAfterSequence($(this).parent());
 });
});

Демо-версия рабочей скрипты: http://jsfiddle.net/6RsVD/

Поделиться
0

Чтобы последовательно выполнять ваши функции, измените код на это:

$('.test1').fadeOut(1000, function() {
    $('.test1').html('You Won: ' + number1).fadeIn(3000, function () {
        $('.test2').fadeOut(1000, function() {
            $('.test2').html('You Won: ' + number2).fadeIn(3000, function () {
                $('.test3').fadeOut(1000, function() {
                    $('.test3').html('You Won: ' + number3).fadeIn(3000);
                });
            });
        });
    });
});

Термин, используемый для этого, - это callback По сути, jQuery запускает первую функцию, и как только она заканчивается, начинается вторая и так далее.

Поделиться
-1

Я плохо разбираюсь в кодировании, но я предлагаю вместо использования функции.fadeOut() или.fadeIn(), вы можете посмотреть в.toggle()

попробуйте посмотреть документацию: http://goo.gl/Oawz0B

Поделиться
  • 2
    .toggle() не имеет той же анимации, что и .fadeToggle() ... .fadeToggle() есть .fadeToggle() . Кроме того, это лучше оставить как комментарий, а не как ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню