css和jquery動畫信封

我目前正在爲家族企業網站推薦。我正在努力做正確的事。當你將鼠標放在信封上時，它應該將信封向上移動，而不是所有的信封。而且我也遇到了IE的問題，即使在新版IE信封中也看不到。我不知道爲什麼？css和jquery動畫信封

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<link href="style2.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script> 
<script type="text/javascript" src="js/js1.js"></script> 
</head> 
<body> 
<ul id="testimo"> 
<li class="envelope"> 
<div class="list"> 
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote> 
</div> 
</li> 
<li class="envelope"> 
<div class="list"> 
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote> 
</div> 
</li> 
<li class="envelope"> 
<div class="list"> 
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote> 
</div> 
</li> 
<li class="envelope"> 
<div class="list"> 
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote> 
</div> 
</li> 
</ul> 
</body> 
</html>

CSS：

#testimo li { 
margin-bottom:40px; 
} 
#testimo li p { 
color:#666; 
margin-top:5px; 
font-size:18px; 
} 
.hh2 p { 
font-family:"Segoe Print"; 
font-size:17px !important; 
} 
.envelope { 
width:300px; 
height:150px; 
position:relative; 
padding: 120px 24px 0; 
overflow: hidden; 
float: left; 
-webkit-transition:1s; 
transition:1s; 
} 
.list { 
width:240px; 
height:150px; 
background:white; 
-moz-box-shadow: inset 0 0 5px #888, 0 0 10px #888; 
-webkit-box-shadow: inset 0 0 5px #888, 0 0 10px #888; 
box-shadow: inset 0 0 5px #888, 0 2px 8px #888; 
padding: 30px 20px 0; 
font-size: 16px; 
-webkit-transition:1s; 
position:absolute; 
top:100px; 
left:30px; 
z-index:2; 
-webkit-transition:0.8s; 
transition:0.8s; 
} 
.envtop { 
position:absolute; 
top:20px; 
z-index:1; 
-webkit-transition:0.8s; 
transition:0.8s; 
} 
.envbot { 
position:absolute; 
top:20px; 
z-index:3; 
-webkit-transition:0.8s; 
transition:0.8s; 
} 
.envani { 
-ms-transform:rotate(4deg); 
-webkit-transform:rotate(4deg); 
transform:rotate(4deg); 
top:0px; 
} 
.listani { 
top:60px; 
} 
.envshadow { 
position: absolute; 
bottom:0; 
z-index: 4; 
left: 0; 
} 
.gray .envtop, .gray .envbot { 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
filter: gray; 
-webkit-filter: grayscale(100%); 
}

的Javascript：

$(document).ready(function() { 

    $('<img class="envtop" src="images/envtop.jpg" alt="Otwarta koperta."/>').prependTo('#testimo li'); 
    $('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li'); 
    $('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li'); 

    $("#testimo :nth-child(4n+1)").addClass('gray'); 

    $('.envelope').mouseover(function() { 
    $('.envtop').addClass('envani'); 
    $('.envbot').addClass('envani'); 
    $('.list').addClass('listani'); 
    }); 

    $(".envelope").mouseout(function() { 
    $('.envtop').removeClass('envani'); 
    $('.envbot').removeClass('envani'); 
    $('.list').removeClass('listani'); 
    }); 

    $('.envelope').click(function() { 
    $('.list') 
    .css({top: 0}) 
    .delay(2000) 
    .css({opacity: 0}); 

}); 
});

來源

2013-05-28 M-K

在鼠標移到你正在改變所有的CLAS而不是在父類中找到的類。一個解決方案將使用.find()

$(document).ready(function() { 

    $('').prependTo('#testimo li'); 
    $('').appendTo('#testimo li'); 
    $('').appendTo('#testimo li'); 

    $("#testimo :nth-child(4n+1)").addClass('gray'); 

    $('.envelope').mouseover(function() { 
     $(this).find('.envtop').addClass('envani') 
     .end().find('.envbot').addClass('envani') 
     // .end() will return the selection to the first selector, in this case $(this) 
     .end().find('.list').addClass('listani'); 
    }); 

    $(".envelope").mouseout(function() { 
     $(this).find('.envtop').removeClass('envani') 
     .end().find('.envbot').removeClass('envani') 
     .end().find('.list').removeClass('listani'); 
    }); 

    $('.envelope').click(function() { 
     $(this).find('.list') 
      .css({ 
      top: 0 
     }) 
      .delay(2000) 
      .css({ 
      opacity: 0 
     }); 

    }); 
});

來源

2013-05-28 20:09:07 Spokey

太好了，謝謝。有誰知道爲什麼Internet Explorer不會在網站上顯示信封？ –

@MarcinKilarski不幸的是，因爲我已經在IE瀏覽器中試過了，而且信封正在顯示。你使用什麼版本？ – Spokey

css和jquery動畫信封

回答

相關問題