jQuery崩潰褪色divs和擴大動畫問題

我試圖動畫圖像的全部寬度和高度的一部分，它與左上角的圖像工作，因爲我期望，但其他人它將圖像移動到頂部左邊，然後蓬勃生機jQuery崩潰褪色divs和擴大動畫問題

Here's a link to my jsFiddle

有沒有辦法來淡入淡出的兄弟姐妹，然後從當前位置動畫形象？

感謝

SOLUTION

爲了得到這在所有的瀏覽器我這樣做jsFiddle

感謝iWasRobbed與解決方案

來源

2011-02-17 Jamie Taylor

你的樣品中的IMG SRC似乎是錯的。 – Dogbert 2011-02-17 23:45:46

這是絕對有可能的，只是不與fadeIn或fadeOut功能。相反，你必須爲絕對定位的元素設置不透明度。如果您嘗試使用fadeIn或fadeOut，那麼它什麼也不做。

這裏是一個jfiddle版本使用jQuery 1.5.0它的工作原理（添加Orbling對誰也看不到一個破碎的形象符號Firefox用戶圖像）：http://jsfiddle.net/iwasrobbed/qPkr5/1/

<!DOCTYPE html> 
<html> 
<style media="screen" type="text/css"> 
    /* positioning */ 
    img.topLeft {position: absolute; top: 0; left: 0;} 
    img.topRight {position: absolute; top: 0; right: 0;} 
    img.bottomLeft {position: absolute; bottom: 0; left: 0;} 
    img.bottomRight {position: absolute; bottom: 0; right: 0;} 

    /* element dimensions */ 
    div.work {background-color: #ddd; height:240px; position: relative; width:300px;} 
    img {width:150px; height:120px; border:none;} 
</style> 
<body> 
<div class="work"> 
    <a href="#"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a> 
    <a href="#"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a> 
    <a href="#"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a> 
    <a href="#"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a> 
</div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    // prevent click jump 
    $('a').click(function() { 
    return false; 
    }); 

    // do work 
    $('img').hover(
    function(){ 
     console.log("mouseEnter"); 
     var $that = $(this); 
     $(this).parent().siblings('a').animate({opacity: 0},function() { 
      $that.animate({ 
       width: "300px", 
       height: "240px" 
      }); 
     }); 
    }, 
    function(){ 
     console.log("mouseLeave"); 
     var $that = $(this); 
     $(this).animate({ 
      width: "150px", 
      height: "120px" 
     }, 1500, function() { 
      $that.parent().siblings('a').animate({opacity: 1}); 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

來源

2011-02-18 02:12:34 iwasrobbed

右鍵幫助工作我預期的效果，決定玩這個，這並不容易。

這就像我到目前爲止一樣，仍然非常煩人，但這是一個起點。

演示：http://jsfiddle.net/NzcZH/

初始佈局

Initial Layout

衰落

Fading

生長

Growing

原圖

Fullsize

本質上，每個圖像在鉤住.mouseenter()^(docs)/.mouseleave()^(docs)事件，並且嘗試激活所需的圖像，或者根據需要停用它，如果有事情發生，則會創建一個基本隊列（需要修復）。

激活是你如何擁有它，通過一些修改，它會消除不透明度，然後增長活動圖像。取消激活是相反的，將活動圖像縮回到原始圖像，然後淡入（通過不透明）。

對模型的更改主要是HTML/CSS必需品來做這種動畫。

如果使用直.fadeIn()^(docs)/.fadeOut()^(docs)程序，這些.hide()^(docs)圖像0末，從現場刪除它們，並最終移動到非褪色，活動圖像頂部角落，打破動畫。使用不透明度代替圖像的絕對位置以將它們固定就位效果更好。您可以讓它們淡入淡出並隱藏，並在動畫之前重置座標，但如果您想要重疊，那麼這不算好。

理想情況下，z-index應該在圖像上進行更改以保持活動項目在最上方，這將允許並行褪色和增長，目前它正在上演。

[我使用的是.data()^(docs)日常存儲當前的狀態，而不是變量的負載，位整潔。]

HTML結構

<div class="work"> 
    <img id="tl" width="150" height="120" src="http://i.stack.imgur.com/JQFbb.jpg" border="0" /> 
    <img id="tr" width="150" height="120" src="http://i.stack.imgur.com/l5OPs.jpg" border="0" /> 
    <img id="bl" width="150" height="120" src="http://i.stack.imgur.com/okxQz.jpg" border="0" /> 
    <img id="br" width="150" height="120" src="http://i.stack.imgur.com/4uPHw.jpg" border="0" /> 
</div>

CSS

.work { 
    padding: 5px 5px; 
    border: 1px solid black; 
    width: 309px; 
    height: 249px; 
} 

.active { border: 1px solid red; } 

img { position: absolute; border: 1px dashed #aaa; } 

#tl { top: 16; left: 16; } 
#tr { top: 16; left: 171px; } 
#bl { top: 141px; left: 16; } 
#br { top: 141px; left: 171px; }

jQuery代碼

var work = $('.work'); 
var workImages = work.find('img'); 
var growSpeed = 1500; 
var fadeSpeed = 500; 

work.data('changing', false).data('queue', false); 

workImages.mouseenter(function() { 
    var activeImg = workImages.filter('.active'); 

    if (activeImg.length == 0) { 
     activate(this); 
    } 
}).mouseleave(function() { 
    var activeImg = workImages.filter('.active'); 

    if (activeImg.length > 0) { 
     deactivate(); 
    } 
}); 

function activate(cImg) { 
    if (work.data('changing') !== false) { 
     work.data('queue', cImg); 
     return; 
    } 

    var activeImg = workImages.filter('.active'); 

    if (activeImg.length != 0) { 
     return; 
    } 

    work.data('changing', cImg); 

    activeImg = $(cImg); 

    activeImg.addClass('active'); 

    if (!activeImg.data('origPos')) { 
     activeImg.data('origPos', { left: parseInt(activeImg.css('left')), top: parseInt(activeImg.css('top')) }); 
    } 

    workImages.stop(); 

    workImages.not(activeImg).animate({ opacity: 0 }, fadeSpeed, 'linear', function() { 
     activeImg.animate({ 
      left: 16, 
      top: 16, 
      width: 307, 
      height: 247 
     }, growSpeed, 'linear', function() { 
      work.data('changing', false); 

      if (work.data('queue') !== false) { 
       var queued = work.data('queue'); 
       work.data('queue', false); 

       if (queued == 'deactivate') { 
        deactivate(); 
       } else if (queued != cImg) { 
        deactivate(queued); 
       } 
      } 
     }); 
    }); 
} 

function deactivate(cImg) { 
    if (work.data('changing') !== false && work.data('changing') !== 'deactivate') { 
     work.data('queue', 'deactivate'); 
     return; 
    } 

    if (cImg) { 
     work.data('queue', cImg); 
    } 

    var activeImg = workImages.filter('.active'); 

    if (activeImg.length == 0) { 
     return; 
    } 

    work.data('changing', 'deactivate'); 

    var origPos = activeImg.data('origPos'); 

    workImages.stop(); 

    activeImg.animate({ 
     left: origPos.left, 
     top: origPos.top, 
     width: 150, 
     height: 120 
    }, growSpeed, 'linear', function() { 
     workImages.not(activeImg).animate({ opacity: 100 }, fadeSpeed, 'linear', function() { 
      activeImg.removeClass('active'); 
      work.data('changing', false); 

      if (work.data('queue') !== false) { 
       var queued = work.data('queue'); 
       work.data('queue', false); 
       activate(queued); 
      } 
     }); 
    }); 
}

來源

2011-02-18 02:08:42 Orbling

jQuery崩潰褪色divs和擴大動畫問題

回答

相關問題