Jquery таргетинг / проблема с наведением - PullRequest
Новая
       14

Jquery таргетинг / проблема с наведением

1 голос
/ 06 июля 2011

У меня два divs, при наведении span class=fg увеличивается и изменяется непрозрачность, span class=bg уменьшается, а когда вы mouseout возвращаетесь в исходное состояние.

Моя проблемав двух частях:

1: при наведении курсора на первый элемент div, то же действие происходит во втором элементе.

2: Наведение не ограничено элементами div, но происходит всякий раз, когда мышь перемещается по странице.

HTML: 

<div id="wrap">
  <h2>Subtitle</h2>
    <p>
      <span class="bg">Lorem Ipsum has been the</span> 
      <a href="#"><span class="fg"> industry’s standard</span></a> 
      <span class="bg">dummy text ever</span> 
      <span class="fg">since the 1500s,</span>
      span class="bg">when an unknown printer took a galley of type and</span> 
   </p>
</div>

<div id="wrap" class="">
  <h2>Stuff #2</h2>
     <p>
       <span class="bg">Lorem Ipsum has been the</span> 
       <span class="fg"> industry’s standard</span>
       <span class="bg">dummy text ever</span> 
       <span class="fg">since the 1500s,</span>
       <span class="bg">when an unknown printer took a galley of type</span> 
    </p>
</div>

javaScript: 

<script type="text/javascript">
$(document).ready(function() {

  $("#wrap").parent().hover (function () {      
  $("span.fg").animate({"opacity": 1, fontSize: '14px'}, 300);
  $("span.bg").animate({fontSize: '7px'}, 300);
 },
  function () {   
  $("span.fg").animate({"opacity": .5, fontSize: '12px'}, 100); 
  $("span.bg").animate({fontSize: '12px'}, 100);}   
 ); 
});

CSS: 

body  {background: #000;color: #FFF;font-family: Helvetica, sans-serif;}
p     {font-size:12px;}
#wrap { width: 300px;
    height: 150px;
    cursor: pointer;
    margin: 30px auto;  
    overflow:hidden;
       }
a     {text-decoration:none; color:inherit;}
.bg   {color:#999; opacity: 0.4;}
.fg   {color:#999; opacity: 0.4;}

Ответы [ 3 ]

2 голосов
/ 06 июля 2011

id должно быть уникальным, изменить #wrap на .wrap. Также в вашем селекторе вы должны указать контекст, где найти элемент, иначе он будет нацелен на каждый элемент с этим классом. Вы можете достичь этого, передав this или используя find()

$(".wrap").parent().hover(function() {
    $("span.fg", this).animate({
        "opacity": 1,
        fontSize: '14px'
    }, 300);
    $("span.bg", this).animate({
        fontSize: '7px'
    }, 300);
}, function() {
    $("span.fg",this).animate({
        "opacity": .5,
        fontSize: '12px'
    }, 100);
    $("span.bg",this).animate({
        fontSize: '12px'
    }, 100);
});

Это также предполагает, что родитель является <div>, а не общим родителем <div> (например, они не оба вложены в одного и того же родителя)

Пример для jsfiddle

0 голосов
/ 06 июля 2011

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

Эти анимации параллельны (обе они запускаются одновременно) 

$('#first').animate({'left':'50px'});
$('#second').animate({'left':'100px'});

Но здесь вторая анимация начинается после завершения первой анимации: 

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});
0 голосов
/ 06 июля 2011

не использовать один и тот же идентификатор для 2 элементов

$ ("# wrap"). Parent () - родитель, и вы должны использовать элемент $ ("# wrap")

...