1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

JQuery. Помогите найти ошибку

Главные вкладки

Аватар пользователя digital_sword digital_sword 21 ноября 2009 в 14:49

http://trm.ruweb.net/test.html
В исходном коде можно посмотреть скрипт. Что хочу: чтобы при наведении на одну из 3х ссылок справа текст в левом диве менялся. Он и меняется, но только при наведении на первую ссылку.

Хотя вроде с кавычками и скобками все нормально... На всякий случай еще раз скрипт:

$(document).ready(function(){
        $(".round1 a").hover(function() {
                $(".big_round1").animate({opacity: "show"}, "slow");
                $(".big_round2").animate({opacity: "hide"}, "fast");
                $(".big_round3").animate({opacity: "hide"}, "fast");
                });
                                                   

        $(".round2 a").hover(function() {
                $(".big_round2").animate({opacity: "show"}, "slow");
                $(".big_round1").animate({opacity: "hide"}, "fast");
                $(".big_round3").animate({opacity: "hide"}, "fast");
                });

        $(".round3 a").hover(function() {
                $(".big_round3").animate({opacity: "show"}, "slow");
                $(".big_round1").animate({opacity: "hide"}, "fast");
                $(".big_round2").animate({opacity: "hide"}, "fast");
                });

});

Никто не видит ошибки?

Комментарии

Аватар пользователя Demimurych Demimurych 21 ноября 2009 в 16:00

у вас дивы накрывают один другой.

то есть первый накрывает поверх второй, второй третий и т.д.

уберите размеры слоев и все зарабоает.

Это если по сути задачи.

А теперь позвольте поинтересоваться, какова исходная задача. Потому как, создается впечатление что ее решают не очень красивым способом

Аватар пользователя digital_sword digital_sword 21 ноября 2009 в 16:09

Исходная задача:
Есть три ссылки справа.
Есть 3 варианта текста, который пишется в диве слева.
Текст в диве слева меняется в зависимости от того, на какую ссылку навели. Текст большой, с картинками и ссылками.

Размеры убрал, дивы раскидал, толку нет

Аватар пользователя Demimurych Demimurych 22 ноября 2009 в 1:12

исправьте в своем коде
с
$(".round1 a").hover(function() {
$(".big_round1").animate({opacity: "show"}, "slow");
$(".big_round2").animate({opacity: "hide"}, "fast");
$(".big_round3").animate({opacity: "hide"}, "fast");
});

на
$(".round1 a").hover(function() {
$(".big_round1").animate({opacity: "show"}, "slow");
$(".big_round2").animate({opacity: "hide"}, "fast");
$(".big_round3").animate({opacity: "hide"}, "fast");
}, function() {});

у вас неверно описано событие hover

кроме того писать можно еще вот так

$(".round1 a").hover(function() {
$(".big_round1").animate({opacity: "show"}, "slow");
$(".big_round2, .big_round3").animate({opacity: "hide"}, "fast");
}, function() {});

кроме того, обращение по классу операция крайне медленная. наиболее производительным способом есть адресация по id

Аватар пользователя digital_sword digital_sword 22 ноября 2009 в 8:16

Спасибо, с function() {} работает!
А есть ли разница в использовании hover и mousemove?

"Demimurych" wrote:
кроме того, обращение по классу операция крайне медленная. наиболее производительным способом есть адресация по id

Это как? .round1, .big_round1 просто сделать #round1, #big_round1 и обращаться к ним из скрипа так же?

Аватар пользователя Demimurych Demimurych 22 ноября 2009 в 14:24

"digital_sword" wrote:
А есть ли разница в использовании hover и mousemove?

конечно. В нагрузке создаваемой на клинета.
hover имеет две функции срабатывающие по одному разу - мышь навелась на обьект и мышь ушла с обьетка.

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

"digital_sword" wrote:
Это как? .round1, .big_round1 просто сделать #round1, #big_round1 и обращаться к ним из скрипа так же?

<div id="big_round1">"round1"</div>

$("#big_round1").animate({opacity: "show"}, "slow");