Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2013, 04:29
Интересующийся
Отправить личное сообщение для Сершей Посмотреть профиль Найти все сообщения от Сершей
 
Регистрация: 07.07.2013
Сообщений: 10

Удаление глюков при появлении и исчезании блоков
Всем привет. Возникла такая ситуация: есть скрипт, который позволяет при наведении на один блок скрывать другой и наоборот (если убрать мышку с области, в которой расположен первый блок, появляется другой блок) Всё бы хорошо, код работает, все появляется, НО!
Проблема: бывает так, что блоки не сразу появляются и исчезают. Допустим если быстро провести мышкой по области несколько раз, то он начинает моргать или может вообще не появится. Как избавится от этого глюка???
Сайт, на котором можно наглядно посмотреть действие скрипта: msys. by (без пробела). Если на этом форуме запрещены ссылки, то прошу модеров не банить, а просто затереть сайт.

Скрипт:
$(document).ready(function(){

    $(".cc_item1").mouseover(function() {
              $(".cc_title1").animate({ opacity: "0" }, 700);
            });

    $(".cc_item1").mouseleave(function() {
                $(".cc_title1").stop().animate({ opacity: "1" }, 200);
          });		
		  
    $(".cc_item2").mouseover(function() {
              $(".cc_title2").animate({ opacity: "0" }, 200);
            });

    $(".cc_item2").mouseleave(function() {
                $(".cc_title2").stop().animate({ opacity: "1" }, 200);
          });		  
		  
    $(".cc_item3").mouseover(function() {
              $(".cc_title3").animate({ opacity: "0" }, 200);
            });

    $(".cc_item3").mouseleave(function() {
                $(".cc_title3").stop().animate({ opacity: "1" }, 200);
          });		  

    $(".cc_item4").mouseover(function() {
              $(".cc_title4").animate({ opacity: "0" }, 200);
            });

    $(".cc_item4").mouseleave(function() {
                $(".cc_title4").stop().animate({ opacity: "1" }, 200);
          });		  

    $(".cc_item5").mouseover(function() {
              $(".cc_title5").animate({ opacity: "0" }, 200);
            });

    $(".cc_item5").mouseleave(function() {
                $(".cc_title5").stop().animate({ opacity: "1" }, 200);
          });

		  
});

Файл index.php
<div id="cc_menu" class="cc_menu">
    <div class="cc_item1" style="z-index:30;">

        <span class="cc_title1">Разработка WEB-сайтов</span>
        <div class="cc_submenu">
            <ul>
                <p><a href="razrabotka-web-sajtov-opisanie">Описание услуги</a></p>
                <p><a href="razrabotka-web-sajtov-stoimost">Тарифные планы и их стоимость</a></p>
                <p><a href="razrabotka-web-sajtov-bitriks">Система управления 1-С Битрикс</a></p>
                <p><a href="razrabotka-web-sajtov-primechanie">Примечания</a></p>
            </ul>
        </div>
    </div>
    <div class="cc_item2" style="z-index:30;">

        <span class="cc_title2">Продвижение WEB-сайтов</span>
        <div class="cc_submenu">
            <ul >
                <p><a href="prodvizhenie-web-sajtov-stoimost">Тарифные планы и их стоимость</a></p>
                <p><a href="prodvizhenie-web-sajtov-primechanie">Примечания</a></p>
            </ul>
        </div>
    </div>
    <div class="cc_item3" style="z-index:30;">

        <span class="cc_title3">Обслуживание WEB-сайтов</span>
        <div class="cc_submenu">
            <ul>
                <p><a href="obsluzhivanie-web-sajtov-stoimost">Описание услуги  и их стоимость</a></p>
                <p><a href="obsluzhivanie-web-sajtov-primechanie">Примечания</a></p>
            </ul>
        </div>
    </div>
    <div class="cc_item4" style="z-index:30;">

        <span class="cc_title4">Обслуживание компьтеров</span>
        <div class="cc_submenu">
            <ul >
                <p><a href="opisanie-pk">Описание услуги</a></p>
                <p><a href="osnovnye-uslugi-pk">Основой комплекс услуг</a></p>
                <p><a href="dopolnitelnye-uslugi-pk">Дополнительный комплекс услуг</a></p>
            </ul>
        </div>
    </div>
    <div class="cc_item5" style="z-index:30;">

        <span class="cc_title5">Мотаж и обслуживание сетей связи</span>
        <div class="cc_submenu">
            <ul >
                <p><a href="seti-opisanie">Описание услуги</a></p>
                <p><a href="seti-stoimost">Стоимость услуги</a></p>
            </ul>
        </div>
    </div>

</div>


И ещё один вопрос: Допустим у нас на странице расположено много блоков с одним классом. Как сделать так, чтобы при выполнении какого-то действия над блоком с определенным class или id оно выполнялось только для одного блока, а не для всех сразу?
Как пример, нужно чтобы при наведении на один из множества блоков с одним классом исчезал только тот блок, на который навели, а не все сразу.
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2013, 10:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

Сообщение от Сершей
если быстро провести мышкой по области несколько раз, то он начинает моргать или может вообще не появится. Как избавится от этого глюка?
Останавливай анимацию
http://jquery-docs.ru/effects/stop/
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2013, 10:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

Сообщение от Сершей
Как сделать так, чтобы при выполнении какого-то действия над блоком с определенным class или id оно выполнялось только для одного блока, а не для всех сразу?
Делай действие для одного, а не для всех...
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2013, 10:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

Сообщение от Сершей Посмотреть сообщение
Скрипт:
$(document).ready(function(){

    $(".cc_item1").mouseover(function() {
              $(".cc_title1").animate({ opacity: "0" }, 700);
            });

    $(".cc_item1").mouseleave(function() {
                $(".cc_title1").stop().animate({ opacity: "1" }, 200);
          });		
		  
    $(".cc_item2").mouseover(function() {
              $(".cc_title2").animate({ opacity: "0" }, 200);
            });

    $(".cc_item2").mouseleave(function() {
                $(".cc_title2").stop().animate({ opacity: "1" }, 200);
          });		  
		  
    $(".cc_item3").mouseover(function() {
              $(".cc_title3").animate({ opacity: "0" }, 200);
            });

    $(".cc_item3").mouseleave(function() {
                $(".cc_title3").stop().animate({ opacity: "1" }, 200);
          });		  

    $(".cc_item4").mouseover(function() {
              $(".cc_title4").animate({ opacity: "0" }, 200);
            });

    $(".cc_item4").mouseleave(function() {
                $(".cc_title4").stop().animate({ opacity: "1" }, 200);
          });		  

    $(".cc_item5").mouseover(function() {
              $(".cc_title5").animate({ opacity: "0" }, 200);
            });

    $(".cc_item5").mouseleave(function() {
                $(".cc_title5").stop().animate({ opacity: "1" }, 200);
          });

		  
});
Как вариант...

$(".cc_item").mouseover(function() {
         $(this).animate({ opacity: "0" }, 200);
    });

    $(".cc_item").mouseleave(function() {
         $(this).stop().animate({ opacity: "1" }, 200);
    });
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2013, 13:24
Интересующийся
Отправить личное сообщение для Сершей Посмотреть профиль Найти все сообщения от Сершей
 
Регистрация: 07.07.2013
Сообщений: 10

хмм, так у меня в скрипте присутствует stop(), но почему-то всё-равно анимация не останавливается. (this) не подойдет, так как animate и stop.animate прописано для другого блока.
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2013, 02:20
Интересующийся
Отправить личное сообщение для Сершей Посмотреть профиль Найти все сообщения от Сершей
 
Регистрация: 07.07.2013
Сообщений: 10

Проблема решена. Нужно было так:
$(document).ready(function(){

    $(".cc_item", this).mouseover(function() {
              $(".cc_title", this).stop().animate({ opacity: "0" }, 800);
            });

    $(".cc_item", this).mouseleave(function() {
                $(".cc_title", this).stop().animate({ opacity: "1" }, 200);
          });		
	

		  
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление класса при клике на объект lukingnu jQuery 3 23.04.2012 11:14
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 11:24
Проблема при скрытии блоков в Опере InviS (X)HTML/CSS 1 20.03.2011 11:43
удаление disabled при нажатии на элемент выпадающего списка deNSe_01 Events/DOM/Window 3 28.01.2011 09:49
Сделать disqus скрытым при появлении страницы Juster jQuery 4 12.01.2011 21:17