Сжатие кода эффекта наведения ссылки JQuery - PullRequest
Новая
       11

Сжатие кода эффекта наведения ссылки JQuery

0 голосов
/ 10 апреля 2011

Мне интересно, какой метод необходим для сжатия этих строк кода.Обычно при наведении на изображение изображение текста под ним постепенно исчезает. 

        $("#2").hover(function(){
            $('#two').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#two').stop().animate({"opacity": 0}, 600);
        });
        $("#4").hover(function(){
            $('#one').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#one').stop().animate({"opacity": 0}, 600);
        });
        $("#5").hover(function(){
            $('#three').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#three').stop().animate({"opacity": 0}, 600);
        });
        $("#6").hover(function(){
            $('#four').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#four').stop().animate({"opacity": 0}, 600);
        });

Большое спасибо заранее!

Ответы [ 2 ]

3 голосов
/ 10 апреля 2011

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

var id_map = {
    '2': 'two',
    '4': 'one',
    '5': 'three',
    '6': 'four'
};

$('#2, #4, #5, #6').hover(
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 1}, 600); },
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 0}, 600); }
);

Вы также можете поставить id_map наисходные элементы, использующие атрибуты данных.HTML-код будет выглядеть примерно так: 

<div id="2" data-target="two"  >...</div>
<div id="4" data-target="one"  >...</div>
<div id="5" data-target="three">...</div>
<div id="6" data-target="four" >...</div>

И jQuery: 

$('#2, #4, #5, #6').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

Если вы присоедините класс к элементам #2, #4, ..., тоВы можете упростить селектор: 

$('.someClass').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

Кстати, использование всех числовых атрибутов id - это плохая идея , они должны начинаться с буквы.

2 голосов
/ 10 апреля 2011

Если вы присваиваете каждому из применимых элементов HTML класс, например, <img class="fade-on-hover" />, тогда вы можете сделать: 

 $(".fade-on-hover").hover(function(){
    $(this).stop().animate({"opacity": 1}, 600);
 },function(){
    $(this).stop().animate({"opacity": 0}, 600);
 });

EDIT

Изначально мне не хватало того, что вы сами не теряли изображения, поэтому, если вы используете HTML5 и jQuery 1.4.3 или более позднюю версию, вы можете сделать следующее:

HTML: 

 <img id="image-one" class="fade-on-hover" data-hoverelement="text-one" />

Javascript: 

 $(".fade-on-hover").hover(function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 1}, 600);
 },function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 0}, 600);
 });
...