Использование функции добавления jQuery для замены элементов с переходом затухания

Question

Использование функции добавления jQuery для замены элементов с переходом затухания

0

Я пытаюсь использовать метод jquery fadeTo в качестве перехода между запросами метода append конкретного тега li, мой скрипт меняет li в div id "placeholder" на mouseclick div, называемый id "viewMore", однако я не могу получить правильный порядок функций. То, что происходит, когда пользователь нажимает кнопку "Далее" li становится местами мгновенно, прежде чем происходит замирание, потом на замирание из происходит на новом li то новый li затухает обратно. Может кто - то пожалуйста, помогите мне настроить иерархию методов, Ниже мой сценарий, который проходит через ul с данными JSON. Заранее спасибо!

EDIT: setTimeOut был решением этого, отличный метод. - 1/11/14 1:24 PM

    $.getJSON('assets/data/data_001.json', function(data)
    {

      $("#placeholder").html("");
      var ul = $('<ul></ul>');
      $('#placeholder').append(ul);
      var load = $("#imgLd");
      var load2 = $("#titleLd");
      var load3 = $("#priceLd");
      var load4 = $("#descriptionLd");
      var load5 = $("#cartLd");
      $('#cartLd').fadeTo(0,0);

      for(var i in data.items)
      {

        var li = $('<li class=listItem></li>');
        ul.append(li);
        var img = $('<img>');
        img.attr("src", "assets/images/items/" + data.items[i].thumb + ".jpg");
        var title = $("<h3 class=itemTextTitle>" + data.items[i].title + "</h3>");
        var price = $("<h4 class=itemTextPrice>" + data.items[i].price + "</h4>");
        var viewMore = $("<div class=viewMore price=" + data.items[i].price + ">View More</div>");
        viewMore.mousedown((function(x)
        { 

          return function()
          {
            $('#intro').fadeTo(500,0);
            $('#cartLd').delay(750).fadeTo(500,1);
            $('#introBg').delay(500).fadeTo(500,0);
            load.html("<img src=assets/images/items/" + data.items[x].thumb2 + ".jpg>");
            load2.html("<h3 class=itemTextTitle2>" + data.items[x].title + "</h3>");
            load3.html("<h4 class=itemTextPrice>" + data.items[x].price + "</h4>");
            load4.html("<ul class=itemTextDescription>" + 
                            "<li class=itemTextDescription2>" + data.items[x].description.one + "</li>" +
                            "<li>" + data.items[x].description.two + "</li><li>" + data.items[x].description.three + "</li>" + 
                            "</ul>");
            load5.html("<a class=itemCartClick href=#>Add to Cart</a>");
            var priceOutput =" + data.items[x].price + ";

            $('.itemCartClick').on('click', function(){
                alert(JSON.stringify(data.items[x].price));
            });
          }
        })(i));
        li.append(img).append(title).append(price).append(viewMore).append(viewMore);
      }
    });

Вот моя разметка, если это помогает:

        <h3 id="titleLd"></h3>
        <h4 id="descriptionLd"></h4>
        <a id="cartLd" href="#">Add to Cart</a>
        <div id="hero">
        <div id="hero_lft">
            <h3 id="imgLd"></h3>
        </div>
        <div id="hero_rt">
            <h3 id="priceLd"></h3>
        </div>
        </div>
        <div id="intro">
            <h2 class="introText"><div id="logo"></div></h2>
            <h3 class="introText2">Hover over an item to view</h3>
        </div>
        <div id="introBg"></div>
        <div id="placeholder"></div>

Jim22150 10 янв. 2014, в 21:04

Источник

Теги:

javascript

jquery

json

2 ответа

0

Bammmmmmm:

      for(var i in data.items)
      {

        var li = $('<li class=listItem></li>');
        ul.append(li);
        var img = $('<img>');
        img.attr("src", "assets/images/items/" + data.items[i].thumb + ".jpg");
        var title = $("<h3 class=itemTextTitle>" + data.items[i].title + "</h3>");
        var price = $("<h4 class=itemTextPrice>" + data.items[i].price + "</h4>");
        var viewMore = $("<div class=viewMore price=" + data.items[i].price + ">View More</div>");
        viewMore.on('click', function(x)
        { 

          return function()
          {
            $('#intro').fadeTo(500,1);
            $('#cartLd').fadeTo(500,1);
            $('#introBg').fadeTo(500,1);

            setTimeout(function () {
                load.html("<img src=assets/images/items/" + data.items[x].thumb2 + ".jpg>");
                load2.html("<h3 class=itemTextTitle2>" + data.items[x].title + "</h3>");
                load3.html("<h4 class=itemTextPrice>" + data.items[x].price + "</h4>");
                load4.html("<ul class=itemTextDescription>" + 
                                "<li>" + data.items[x].description.one + "</li>" +
                                "<li>" + data.items[x].description.two + "</li>" +
                                "<li>" + data.items[x].description.three + "</li>" + 
                                "</ul>");
                load5.html("<a class=itemCartClick href=#>Add to Cart</a>");
                var priceOutput =" + data.items[x].price + ";

                $('.itemCartClick').on('click', function(){
                    alert(JSON.stringify(data.items[x].price));
                });
            }, 600);

            $('#intro').fadeTo(500,0);
            $('#introBg').fadeTo(500,0);

          }
        }(i));
        li.append(img).append(title).append(price).append(viewMore).append(viewMore);
      }

Моя любимая функция jQuery, setTimeOut, я забыл об этом и просто вспомнил об этом. Это устранило проблему. @Flo Flo, спасибо за указание.on вместо JS onmouseclick. Я поменял его.

Jim22150 10 янв. 2014, в 18:56

Ещё вопросы

Flo · Accepted Answer · 2014-01-10T16-54-00.000Z

Вам необходимо использовать функции обратного вызова следующим образом:

$('#intro').fadeTo(500,0, function() {
    // do stuff when fade out is complete
    // typically ends with a fadeIn (or fadeTo(delay,1) on 
    // the element you hid previously
});

Вы также можете написать функцию и передать ее имя в качестве третьего параметра для fadeTo (см. FadeTo doc) или использовать функцию.queue() (см. Этот урок, немного более сложный).

Подумайте об использовании fadeOut (delay) вместо fadeTo (delay, 0) тоже, и используйте .on("click") вместо mousedown().

JSFiddle был бы полезен (я не полностью понимаю ваш случай использования), но для того, чтобы прояснить все это, вы должны управлять viewMore.on('click') вне вашего цикла for for - это означает, что на каждом ли есть индекс в вашем массиве data.items, например, с атрибутом данных или функцией jQuery data() (в вашем цикле for: li.data('itemIndex', i);):

for(var i in data.items) { // construct the list }

$('.viewMore').on('click', '#placeholder', function() {
    var i = $(this).data('itemIndex');
    $('#intro').fadeOut(500, function() {
        // modify your DOM using your JSON array (data.items[i])
        $(this).fadeIn(500);
    });
});

И не бойтесь встраивать функции в jQuery, обратные вызовы и события, запускающие их, - это весь смысл jQuery!

Удачи

Таким образом, ваше высказывание обернуть дочернюю функцию в другую, новую функцию? Я уверен, что это сработает, но мне кажется, что у меня слишком много функций. Я просто немного потерян в своих вложенных функциях, на самом деле это проект, который я начал год назад, и сейчас только возвращаюсь к нему. С тех пор, как я взял перерыв, я работал с Java, и jQuery стал для меня чуждым. Есть ли аккуратный способ переписать мой код для сокращения функций или мне нужно 3 вложенных? Благодарю.
на самом деле, это было довольно чуждо мне год назад тоже, лол. Я просто взломал и получил что-то, что работает довольно хорошо, но теперь я понятия не имею, как манипулировать иерархией; Можете ли вы привести пример того, как переписать мои вложенные функции? Еще раз спасибо!