Переключение содержимого div на одностраничный сайт с помощью jQuery

Question

Я создаю раздел портфолио на веб-сайте, который будет ограничен 4-мя элементами. Каждый элемент имеет изображение и описание, которые являются видимыми, и раздел сведений, скрытый по умолчанию.

Идея состоит в том, чтобы раздел сведений исчезал при нажатии ссылки для этого элемента. У меня есть рабочая скрипка, которую я собрал вместе, но если уже есть раздел с подробными сведениями, и вы нажмете на другую ссылку, произойдет небольшое совпадение.

Это фрагмент того, что я использую, чтобы контролировать каждый участок детали:

Вы можете увидеть скрипку здесь: http://jsfiddle.net/ERP7L/6/

$("a#project-1-link").click(function(){ 
    $("div#project-2-details, div#project-3-details, div#project-4-details").fadeOut("",function(){ 
     $("div#project-1-details").fadeIn(""); 
    }); 
}); 

Есть ли лучший способ сделать это, что уберет это отставание? Я попытался использовать задержку на fadeIn, но это тоже не сработало.

Заранее благодарен!

Answer 1

Вы должны использовать функцию обратного вызова на .fadeOut(), Это синтаксис:

$(divToHide).fadeOut(400, function() { 
    $(divToShow).fadeIn(); 
}); 

Это работает только (плавно), если функция fadeOut() вызывается только один раз - на видимом элементе. Так что лучше всего было бы найти видимый DIV и предназначаться только что один, вместо ориентации всех -details дивы:

var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); }); 

Тогда обратный вызов будет выглядеть так:

$(visibleDiv).stop().fadeOut(400, function() { 
    $(divToShow).fadeIn(); 
}); 

Я d также добавьте .stop(), чтобы предотвратить наложение и выпадение нескольких фальсификаций.

Также, достойный внимания, это выполнимо без создания различных функций для каждой ссылки. Просто используйте что-то вроде:

$('.nav a').click(function(event) { 
    var currentElement = $(event.currentTarget); 
    var divToShow = $(currentElement).attr('id').replace('link', 'details'); 
    .... 
}); 

Чтобы получить div, вам нужно показать любую ссылку, которую вы нажимаете. Таким образом, все вместе JQuery выглядит следующим образом:

$('.nav a').click(function(event) { 
    var currentElement = $(event.currentTarget); 
    var divToShow = $(currentElement).attr('id').replace('link', 'details'); 

    var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); }); 
    if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div 
    { 
     $(visibleDiv).stop().fadeOut(400, function() { 
      $('#' + divToShow).fadeIn(); 
     }); 
    } 
    else $('#' + divToShow).fadeIn(); // fade it in. 
}); 

Я также добавил, что if заявление так что нет никакой задержки в замирание в первом дел.

JSFiddle Here. Надеюсь это поможет!

Answer 2

Один трюк заключается в использовании position: absolute, так что элементы (содержимое) DIV занимают одинаковое пространство и кроссфейд красиво. Я также удалил много дубликатов кода, используя className вместо id.

Fixed JSFiddle: http://jsfiddle.net/os8zmhgc/

Runnable сниппет:

$(document).ready(function() { 
 
    $("A", ".nav").click(function() { 
 
    var targetId = $(this).data("target"); 
 
    var $targetDiv = $("#project-" + targetId + "-details"); 
 
    $(".project-details").fadeOut(); 
 
    $targetDiv.fadeIn(); 
 
    }); 
 
    $("a.close").click(function() { 
 
    $(".project-details").fadeOut(); 
 
    }); 
 
});

div.nav { 
 
    margin: 20px 0; 
 
} 
 
.project-details { 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: none; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 40px; 
 
} 
 
a.close { 
 
    cursor: pointer; 
 
    background: white; 
 
    color: black; 
 
    padding: 10px; 
 
    position: relative; 
 
    top: -30px; 
 
    left: -40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <a href="#" id="project-1-link" data-target="1">One</a> 
 
    <a href="#" id="project-2-link" data-target="2">Two</a> 
 
    <a href="#" id="project-3-link" data-target="3">Three</a> 
 
    <a href="#" id="project-4-link" data-target="4">Four</a> 
 
</div> 
 
    <div id="project-1-details" class="project-details"> 
 
    <a class="close">x</a> 
 
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> 
 
    <div id="project-2-details" class="project-details"> 
 
    <a class="close">x</a> 
 
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> 
 
    <div id="project-3-details" class="project-details"> 
 
    <a class="close">x</a> 
 
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> 
 
    <div id="project-4-details" class="project-details"> 
 
    <a class="close">x</a> 
 
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>

Answer 3

: это хау

$('body').on('click', '#nav > a', function(){ 
 
    var detail = $('#nav-details > div:eq(' + $(this).index() + ')'); 
 
    detail.siblings().fadeOut().promise().done(function(){ 
 
    detail.fadeIn(); 
 
    }); 
 
}); 
 
$('body').on('click', '#nav-details .close', function(){ 
 
    $(this).parent().fadeOut(); 
 
});

#nav{ 
 
    margin:20px 0; 
 
} 
 
#nav-details > div{ 
 
    display:none; 
 
    background-color:black; 
 
    color:white; 
 
    padding:40px; 
 
    position: relative; 
 
} 
 
span.close{ 
 
    cursor:pointer; 
 
    background:white; 
 
    color:black; 
 
    padding:10px; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"> 
 
    <a href="#">One</a> 
 
    <a href="#">Two</a> 
 
    <a href="#">Three</a> 
 
    <a href="#">Four</a> 
 
</div> 
 
<div id="nav-details"> 
 
    <div> 
 
    <span class="close">x</span> 
 
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
    </div> 
 
    <div> 
 
    <span class="close">x</span> 
 
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
    </div> 
 
    <div> 
 
    <span class="close">x</span> 
 
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
    </div> 
 
    <div> 
 
    <span class="close">x</span> 
 
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
    </div> 
 
</div>

Answer 4

Ну, во-первых. Попробуйте использовать классы, если вы хотите сделать одно и то же действие для каждого элемента. (С тем же действием я имею в виду: открывать и закрывать)

Итак, вы все равно можете использовать идентификатор по очень конкретной причине и классам для общего.

Я попытался сделать это более простым без каких-либо изменений в html-части. Но я рекомендую вам поместить ссылки и детали в контейнеры.

Вот решение, я знаю, это кажется сложным ... Может быть, с fadeToggle было бы лучше. Но необходимо изменить DOM.

Вот ваш HTML (с классами и DATA- атрибутов):

<div class="nav"> 
<a href="#" id="project-1-link" class="project" data-id="1"> 
    One  
</a> 


<a href="#" id="project-2-link" class="project" data-id="2"> 
    Two  
</a> 


<a href="#" id="project-3-link" class="project" data-id="3"> 
    Three 
</a> 

<a href="#" id="project-4-link" class="project" data-id="4"> 
    Four 
</a> 




<div id="project-1-details" class="details"> 
    <a class="close">x</a> 
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
</div> 

<div id="project-2-details" class="details"> 
    <a class="close">x</a> 
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
</div> 

<div id="project-3-details" class="details"> 
    <a class="close">x</a> 
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
</div> 


<div id="project-4-details" class="details"> 
    <a class="close">x</a> 
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
</div> 

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

вот скрипт:

$(function(){ 
    $(".project").on("click", function(){ 

    // HERE WE TAKE THE NUMBER OF THE ID FROM THE CLICKED OBJECT 

    var dataid = $(this).attr("data-id"); 

    // THEN WE FADE OUT EVERYTHING IS VISIBLE 
    $(".details").fadeOut(); 

    //HERE, WE'LL TAKE THE ONE WE'RE GONNA FADE IN 
    setTimeout(function(){ 
     $("#project-"+dataid+"-details").fadeIn(); 
    },400) 
    }); 
}) 

И вот jsFiddle:

http://jsfiddle.net/mpcguc4k/

Извините за длинный ответ.