JQuery - создание функции, которая скрывает / отображает контент

Question

Если перейти к: http://www.awaismuzaffar.com/examples/content_1.html

, вы можете просмотреть демонстрацию моей функции jQuery.

По сути, предполагается скрывать / отображать контент в зависимости от того, какая div мышьокончен.

Однако, в данный момент вы поймете, что когда мышь наведена на все элементы div, весь текст накладывается друг на друга.

Мне нужно найти способскрыть содержимое предыдущего div, когда указатель мыши находится над другим div.Не уверен, как это сделать.

Вот фрагмент кода jQuery:

$(document).ready(function(){
    var current_id;
    $('div.video_image').hover(
        function(){
            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
        }
    );
});

Спасибо.

Answer 1

Вы должны использовать функции наведения и наведения мыши вместо наведения, потому что наведение не сбрасывается при перемещении мыши от элемента.Кроме того, функции show () и hide () проще, чем анимация прозрачности.

$(document).ready(function(){
var current_id;
$('div.video_image').mouseover(
    function(){
        current_id = $(this).attr('id').split('_')[1];
        $('div#text_' + current_id).stop().show('slow');                
    });
$('div.video_image').mouseout(
    function(){
        $('div#textcontainer).children().hide('slow');

});

Или что-то в этом роде, по крайней мере ...

Answer 2

Решением было бы очистить большой div (функция .empty) и поместить новый текст внутри (.append () или .html () функция)

Answer 3

Нечто подобное может работать.Вот пример этого скрипта в действии: http://jsbin.com/apiya3

$(document).ready(function(){
    var current_id, previous_id;
    $('div.video_image').hover(
        function(){
            previous_id = current_id;
            if (previous_id)
                $('div#text_' + previous_id).stop().animate({'opacity': '0'}, 'slow');

            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
    });
 });

Answer 4

Вы пробовали функции element.hide() и element.show()? Они принимают скорость в качестве параметра (например, «медленно», «быстро» и т. Д.).