JQuery Toggle изображения вкл / выкл проблема - PullRequest
Новая
       9

JQuery Toggle изображения вкл / выкл проблема

1 голос
/ 28 января 2011

нововведений в jQuery, поэтому я был бы признателен за любую помощь, кто-нибудь может мне помочь.Я просмотрел архивы и, похоже, не могу найти ответ на то, что я ищу.

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

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

Вот js- 

<script type="text/javascript">
    $(document).ready(function(){
        $(".charity_logo img").hover(
            function(){
                $(this).toggleClass("trigger").next().toggleClass("trigger");
            return false;
        });
    });
</script>
<script type="text/javascript">
    var types = ["trigger"], dimmed = 1.0, threshhold = 20;
    $(document).ready(function() {
        $.each(types, function(index, type) {
          var hover = (function() {
              var timer;
              return {
                  over: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", 0.4);}, threshhold);
                  },
                  off: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", dimmed);}, threshhold);
                  }
              };  
          })();
          $("img." + type).fadeTo(0, dimmed).hover(hover.over, hover.off);
        });
    });
</script>

--------------------- и вот HTML --------------------------- 

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-26.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-27.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-28.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-29.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

    </div><!--logo_banner-->

Заранее спасибо!

1 Ответ

3 голосов
/ 28 января 2011

Я бы сделал это всего за css 

.div_container img
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

.div_container:hover img
{
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

.div_container:hover img:hover
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

Когда вы не наводите курсор на contianer div, все они полностью видны.Когда мышь входит в div, все img устанавливаются прозрачными, за исключением изображения, которое вы на самом деле наводите на

...