FadeIn один элемент и fadeOut все остальные

Im пытается fadeIn один элемент с jQuery и при нажатии на другой элемент fadeOut этот элемент. Я знаю, как fadeIn divs, но как я исчезаю все остальные? спасибо за помощь!FadeIn один элемент и fadeOut все остальные

дивы есть идентификаторы #id1 #id2 #id3 #id4

here's мой Jquery

function trying(id){ 

var fade_in =function (e){ 
     $(id).fadeIn(); 
    }; 
    $(id).click(fade_in); 
}; 

trying("#id1"); 
trying("#id2"); 
trying("#id3"); 
trying("#id4");

источник

2015-05-08 pepote

Вы можете добавить свой HTML. Лучше использовать обход DOM, чтобы найти дочерние/дочерние элементы, связанные с тем, который поднял событие, вместо предоставления всех идентификаторов. –

Использовать классы и исчезать на классе, а не на id. – Andy

Как сказал Энди, вы должны дать эти элементы класса. Назовем классный картофель, потому что кто не любит картошку.

$potatoes = $('.potatoes'); 

$potatoes.click(function() { 
    $(this).fadeIn('fast'); // fade in the div that was clicked 
    $potatoes.not($(this)).fadeOut('fast'); // fade out every other div 
});

источник

2015-05-08 15:03:11

Спасибо за это, спасли мне много головных болей, пытаясь понять, почему мой код не работает! – Osu

Как об этом (при условии, что эти элементы являются div):

$('div[id*=id]').click(function(){//when any div whose id contains 'id' 

    $('div[id*=id]').not($(this)).hide(); 
    //hide all divs whose id contains 'id' except the current `div` clicked 
});

источник

2015-05-08 14:41:41 renakre

Немного пояснения кода были бы полезны – empiric

@ empiric добавил, спасибо! – renakre

Я не совсем продается с использованием javascript, чтобы обеспечить визуальный эффект от того, что вы пытаетесь сделать; однако я бы использовал javascript - в этом случае jquery - для применения состояний класса к элементам. Дайте мне знать, если этот пример поможет, http://output.jsbin.com/kuxefunibi/.

Все, что я делаю, применяет класс .active к оболочке, а затем применяет класс .current к текущему щелчку по блоку. При этом в любое время, когда присутствует .active, все из .blocks внутри него полупрозрачны, если только класс .current не применяется к классу .block. Тогда и только тогда этот конкретный .block.current будет твердым.

$(function() { 
 
    $('.block').on('click', function() { 
 
    $(this) 
 
     .siblings().removeClass('current').end() 
 
     .addClass('current') 
 
     .parent().addClass('active'); 
 
    return false; 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
.block-list.active .block { 
 
    transition: opacity 0.2s; 
 
    opacity: 0.25; 
 
} 
 
.block-list.active .current { 
 
    opacity: 1; 
 
} 
 
.block { 
 
    width: 25%; 
 
    padding: 30px 15px; 
 
    float: left; 
 
    background-color: #333333; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Testing</title> 
 
</head> 
 

 
<body> 
 
    <div class="block-list"> 
 
    <div class="block block-1">some text here</div> 
 
    <div class="block block-2">some text here</div> 
 
    <div class="block block-3">some text here</div> 
 
    <div class="block block-4">some text here</div> 
 
    <div class="block block-5">some text here</div> 
 
    <div class="block block-6">some text here</div> 
 
    <div class="block block-7">some text here</div> 
 
    <div class="block block-8">some text here</div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-05-08 14:57:59 Seed

Это вы имели в виду? jsfiddle fadein fadeoutall Я добавил несколько комментариев.

Вот код JS:

$('div[id*="id"]').click(function() { 
    $('div[id*="id"]').fadeOut('normal');//not recommended but if you don't want to use a class, then this will fadeOut all elmts that have ids starting with 'id' 
    $(this).fadeIn('normal');//fadeIn clicked jQuery object 
});

источник

2015-05-08 15:03:16 Orochi1992

FadeIn один элемент и fadeOut все остальные

ответ

Смежные вопросы