jquery動畫第二張照片不顯示

一切工作與jQuery動畫接受一件事情，當我點擊第二張照片，讓它擴大了第一張照片顯示在疊加而不是第二張照片。我已經在這裏編輯文件，以顯示第二張照片。jquery動畫第二張照片不顯示

這裏是我的代碼有

 #expand .bio-pic2 { 
     position:absolute; 
     top:0; 
     left:0; 
    } 
    #expand { 
     position:absolute; 
     width:1000px; 
     border: 1px solid black; 
     display: none; 
     background-color:#ffffff; 
     z-index:9999; 
     height:323px; 
    } 
    .bio-pic2 img { 
     position:absolute; 
     top:0; 
     left:0; 
     width:323px; 
    } 
    .testimonial { 
     position:absolute; 
     top:333px; 
     left:0; 
     font-size:15px; 
    } 
    .desc { 
     position:absolute; 
     top:10px; 
     left:333px; 
    } 
    .bio-pic { 
     float:left; 
     cursor: pointer; 
     z-index:9998; 
     margin:0 5px 0 0; 
    } 

     <div id="expand"> 
     <div class="test"> 
      <div class="bio-pic2"> 
       <img src="http://www.brent-ransom.com/photo-img.jpg" /> 
       <div class="bio-nt"> 
         <h2>Name</h2> 

         <h3>Position</h3> 

       </div> 
      </div> 
      <div class="testimonial">A testimonial!</div> 
     </div> 
     <div class="desc">This is a paragraph of text.</div> 
    </div> 

     <div class="bio-pic"> 
      <img src="http://www.brent-ransom.com/photo-img.jpg" /> 
     </div> 
     <div id="expand"> 
      <div class="test"> 
       <div class="bio-pic2"> 
        <img src="http://brent-ransom.com/photo2-img.jpg" /> 
        <div class="bio-nt"> 
          <h2>Name</h2> 

          <h3>Position</h3> 

        </div> 
       </div> 
       <div class="testimonial">A testimonial!</div> 
      </div> 
      <div class="desc">This is a paragraph of text.</div> 
     </div> 
     <div class="bio-pic"> 
      <img src="http://brent-ransom.com/photo2-img.jpg" /> 
     </div> 

    $(".bio-pic").click(function (e) { 
    e.stopPropagation(); 
    //$('.bio-pic2').toggle("slow"); 
    var menu = $("#expand"); 
    $(menu).show().animate({ 
     width: 500 
    }, 1000); 
}); 
$("#expand").click(function() { 
    $(this).animate({ 
     width: 0 
    }, 1000, function() { 
     $(this).hide(); 
    }); 
})

這裏是的jsfiddle我在哪裏就可以了http://jsfiddle.net/BrentRansom/h64CZ/1/

來源

2013-10-03 user2751645

你有相同的ID爲兩個div（展開）這將導致問題 –

有沒有辦法將1 2 ...附加到ID展開？我更新jQuery，這就是爲什麼我問。此外，我正在使用WordPress AFC中繼器字段構建此代碼。 – user2751645

是的，我只是做了，看到我的回答 –

你可以有這樣的

$(".bio-pic").click(function (e) { 
    e.stopPropagation(); 
    //$('.bio-pic2').toggle("slow"); 
    var menu = $("#expand-"+$(this).attr("id").split("-")[1]); 
    $(menu).show().animate({ 
     width: 500 
    }, 1000); 
}); 
$("#expand-1, #expand-2").click(function() { 
    $(this).animate({ 
     width: 0 
    }, 1000, function() { 
     $(this).hide(); 
    }); 
})

或使用類（更好的方法）不同的唯一ID

演示http://jsfiddle.net/h64CZ/2/

來源

2013-10-03 16:01:02

非常感謝您的幫助 – user2751645

+ 1從http://stackoverflow.com/questions/19167514;） – 2013-10-03 19:49:32

工作你有id="expand"兩個元素的鏈接。它被禁止 - 它可能會導致JavaScript發瘋。

下面是從MDN一個qoute：

該屬性定義的唯一標識符（ID）必須是唯一的整個文檔英寸

來源

2013-10-03 15:55:55 matewka

使用<div class="expand">

而不是<div id="expand">

來源

2013-10-03 16:29:44

jquery動畫第二張照片不顯示

回答

相關問題