ugrás a tartalomhoz

Jquerry animate

cszlak · 2013. Aug. 31. (Szo), 08.36
Szeretném három ikonomat, animáválva lecserélni másikra, hover-ként.
  1. #icon .facebook, #icon .facebook_hover{  
  2. margin-left:740px;  
  3. float:left;  
  4. width:35px;  
  5. height:35px;  
  6.  }  
  7. #icon .skype, #icon .youtoube ,  
  8. #icon .skype:hover, #icon .youtoube:hover{  
  9. margin-left:-5px;  
  10. float:left;  
  11. width:35px;  
  12. height:35px;  
  13.     }  
  1. <div id="icon">  
  2. <a href="#" title="Facebook"  id="exchange">   
  3. <div class="facebook" ><img src="images/icon_facebook.png" width="37"></div></a>  
  4. <a href="#" title="Skype">     <div class="skype"><img src="images/icon_skype.png" width="37"></div></a>  
  5. <a href="#" title="Youtube">   <div class="youtoube"><img src="images/icon_youtube.png" width="37"></div></a>  
  6. </div>    
  1. <script type="text/javascript">  
  2. $("#facebook").hover(function(){  
  3.     $(this).stop(true, true).animate({ 'background-image' :'url("images/icon_facebook.png")' });  
  4. }, function() {  
  5.     $(this).stop(true, true).animate({ 'background-image' :'url("images/icon_facebook_hover.png")'});  
  6. });  
  7. </script>  
‹ Hogyan érdemes js-ben buildelni Javascript aszinkron iteráció ›
 ■
1

Hol a probléma? Miért nem

hunkris · 2013. Aug. 31. (Szo), 12.10
Hol a probléma?
Miért nem css-sel csinálod?
2

css?

cszlak · 2013. Aug. 31. (Szo), 12.28
Effect kellene hozzá valami fade, vagy hasonló, azt hogyan lehet css-el, úgy hogy az IE nem ismeri a hover bacground cserét????????
3

animate

Poetro · 2013. Aug. 31. (Szo), 12.48
Animate-tel csak számszerű értékeket lehet animálni. Ezért valami mást kell tenned. Például megoldod CSS-sel.
  1. <a class="facebook icon" href="#facebook">Facebook</a>  
  1. .icon {  
  2.   color: transparent;  
  3.   font-size: 0;  
  4.   width: 48px;  
  5.   height: 48px;  
  6.   background: url(http://freebiesbug.com/wp-content/uploads/2012/12/dark_social_icons_free_psd.jpg) -150px -102px no-repeat;  
  7.   display: block;  
  8.   position: relative;  
  9. }  
  10. .icon:after {  
  11.   width: 48px;  
  12.   height: 48px;  
  13.   background: url(http://freebiesbug.com/wp-content/uploads/2012/12/dark_social_icons_free_psd.jpg) -150px -37px no-repeat;  
  14.   display: block;  
  15.   position: absolute;  
  16.   content: "";  
  17.   top: 0;  
  18.   left: 0;  
  19.   opacity: 0;    
  20.   -webkit-transition: opacity .2s;  
  21.   -moz-transition: opacity .2s;  
  22.   -ms-transition: opacity .2s;  
  23.   transition: opacity .2s;  
  24. }  
  25. .icon:hover:after {  
  26.   opacity: 1;  
  27. }  
Próba.
Ha meg nem animálódik IE alatt szerintem nem a világ vége. De a fentit meg tudod valósítani jQuery-vel is.
4

Köszönöm

cszlak · 2013. Aug. 31. (Szo), 19.02
Köszönöm, ilyesmire gondoltam.
ÉS a jó tanácsokat is.
5

Lehet még egy kérdésem?

cszlak · 2013. Aug. 31. (Szo), 20.07
Ez miért nem működik ebben az esetben?
  1. input[type="submit"]{  
  2.      width:75px;  
  3.      height:28px;  
  4.      border:0px #000000;  
  5.      padding:0px;  
  6.      margin:10px 0px 0px 0px;  
  7.      background:url(../images/TOVABB.png) no-repeat;  
  8.      display: block;    
  9.      position: relative;    
  10.     }  
  11.   
  12. input[type="submit"]:after {  
  13.      width:75px;  
  14.      height:28px;  
  15.      border:0px #000000;  
  16.      padding:0px;  
  17.      margin:10px 0px 0px 0px;  
  18.        
  19.      background:url(../images/TOVABB1.png) no-repeat;  
  20.      display: block;    
  21.   position: absolute;    
  22.   content: "";    
  23.   top: 0;    
  24.   left: 0;    
  25.   opacity: 0;      
  26.   -webkit-transition: opacity .9s;    
  27.   -moz-transition: opacity .9s;    
  28.   -ms-transition: opacity .9s;    
  29.   transition: opacity .9s;    
  30.     }  
  31.   
  32. input[type="submit"]:hover:after {    
  33.   opacity: 1;    
  34. }   
  1. <input name="mail_submit2" type="submit" onclick="formSubmit()" class="button_tavabb"  value=""   
8

input

Poetro · 2013. Aug. 31. (Szo), 20.53
Egyes böngészők nem engedik az after / before pszeudó kijelölő használatát input elem esetén.
9

Igen, köszönöm

cszlak · 2013. Szep. 1. (V), 09.42
Utánna olvastam, köszönöm.
6

Tárhelyen már nem működik!

cszlak · 2013. Aug. 31. (Szo), 20.25
Valamit elrontottam??? (Chrome-ban néztem)
  1. #icon{  
  2.     width:850px;  
  3.     height:40px;  
  4.     margin:10px 0px 0px 0px;  
  5.     float:left;  
  6.     }  
  7.  #icon .facebook,  #icon .skype, #icon .youtoube{  
  8.     float:left;  
  9.     width:35px;  
  10.     height:35px;  
  11.     display: block;  
  12.     font-size: 0;   
  13.     color: transparent;    
  14.     position:absolute;  
  15.      }  
  16.     #icon .facebook{margin-left:750px;  }  
  17.     #icon .skype{margin-left:780px;}  
  18.     #icon .youtoube{margin-left:810px;}  
  19.   
  20.   
  21.  #icon .facebook{  
  22.     background:url(../images/icon_facebook.png) no-repeat;  
  23.     }  
  24.       
  25. #icon .facebook:after{  
  26.     background:url(../images/icon_facebook_hover.png) no-repeat;  
  27. }  
  28.       
  29.      #icon .skype{  
  30.         background:url(../images/icon_skype.png) no-repeat;  
  31.     }  
  32.       
  33.     #icon .skype:after{  
  34.     background:url(../images/icon_skype_hover.png) no-repeat;  
  35.     }  
  36.       
  37.      #icon .youtoube{  
  38.     background:url(../images/icon_youtube.png) no-repeat;  
  39.     }  
  40.       
  41.     #icon .youtoube:after{  
  42.     background:url(../images/icon_youtube_hover.png) no-repeat;  
  43.     }  
  44.       
  45.      #icon .facebook:after,  
  46.      #icon .skype:after,  
  47.      #icon .youtoube:after   
  48.     {  
  49.     display: block;    
  50.    position: absolute;  
  51.    font-size: 0;   
  52.    color: transparent;      
  53.    content: "";    
  54.    top: 0;    
  55.    left: 0;    
  56.    opacity: 0;      
  57.    -webkit-transition: opacity .5s;    
  58.    -moz-transition: opacity .5s;    
  59.    -ms-transition: opacity .5s;    
  60.    transition: opacity .5s;   
  61.    width: 48px;    
  62.    height: 48px;     
  63.     }  
  64.     #icon .facebook:hover:after,  
  65.      #icon .skype:hover:after,  
  66.      #icon .youtoube:hover:after  
  67.      {    
  68.   opacity: 1;    
  69. }     
  1. <div id="icon">  
  2. <a href="#" title="Facebook" class="facebook icon"></a>   
  3. <a href="#" title="Skype" class="skype"></a>  
  4. <a href="#" title="Youtube" class="youtoube"></a>  
  5. </div>    
7

IE -ben meg tökéletesen animál!!

cszlak · 2013. Aug. 31. (Szo), 20.34
IE -ben meg tökéletesen animál!!
Mozzilában is tökéletes!!
Akkor most mi van??
Csak a Chrome nem jó!!

Mit rontottam el??