Converti jquery animazione CSS3

HTML:Converti jquery animazione CSS3

<div id="slick-slidetoggle">wxyz</div>   

      <div id="slickbox" >abcd</div>

// nasconde lo slickbox non appena il DOM è pronto (un po 'prima che la pagina di carico)

  var hoverVariable=false; 
     var hoverVariable2=false; 

     $('#slickbox').hide(); 
     $('#slick-slidetoggle').mouseover(function() { 
      hoverVariable2=true; 
      $('#slickbox').slideToggle(600); 
      return false; 
     }) 
     $('#slick-slidetoggle').mouseleave(function() { 
      hoverVariable2=false; 
      setTimeout(function(){ 
      if(!hoverVariable && !hoverVariable2){ 
      $('#slickbox').slideToggle(600); 
      return false;} 
     }, 1000); 
     }) 
     $('#slickbox').mouseleave(function() {      
      hoverVariable=false; 
      setTimeout(function(){ 
      if(!hoverVariable && !hoverVariable2){      
      $('#slickbox').slideToggle(600); 
      return false;} 
      return false; 
      }, 1000); 
     }) 
     $('#slickbox').mouseover(function() { 
      hoverVariable2=false; 

      hoverVariable=true; 

     })

CSS

#slickbox { 
    background: black; 
    width:100px; 
    height: 135px; 
    display: none; 
    cursor:pointer; 
    color:white; 
} 
#slick-slidetoggle{ 
background: yellow; 
    width:100px; 
    height: 135px; 
    cursor:pointer; 
    color:black; 

}

Ora la funzionalità di cui sopra è ciò che voglio ottenere utilizzando puramente CSS, ovvero quando si passa il mouse sopra il pulsante "wxyz", il pulsante "abcd" dovrebbe scendere e rimanere visibile anche se il mouse viene spostato da "wxyz" per 3 secondi.

ho cercato ritardo di transizione con proprietà di visualizzazione ma a quanto pare non funziona sulla proprietà di visualizzazione, poi ho provato position: absolute & visibilità ritardo & transizione di visibilità, ma poi l'aspetto del tasto è stato rimandato da 3 non secondi il hidnig . Voglio il pulsante "abcd" per nascondere dopo 3 secondi di spostare il pulsante di distanza da "wxyz" utilizzando solo i CSS o CSS3

fonte

2012-12-31 Anonymous

Puoi darci un jsfiddle di quello che hai già provato in modo che possiamo provare a trovare una soluzione da lì? – tchap

@tchap jsfiddle.net/sP5hg/7/ Questo è quello che ho provato, sono riuscito a ritardare la visibilità di 4 secondi, ma dovrei ritardare la scomparsa di 4 secondi. O 3 –

Ecco un Example (Code here)

(ho solo -webkit, scritto, ma si potrebbe aggiungere gli altri prefissi)

#test2 { 
    position:absolute; 
    z-index:1; 
    background: black; 
    width:100px; 
    height: 135px; 
    opacity: 0; 
    cursor:pointer; 
    color:white; 
    opacity:0; 
    -webkit-animation-duration: 600ms; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: both; 
} 

#test { 
    position:absolute; 
    z-index:2; 
    background: yellow; 
    width:100px; 
    height: 135px; 
    cursor:pointer; 
    color:black; 

} 
.container { 
    position:relative; 
} 

.container:hover #test2 { 
    opacity:1; 
    -webkit-animation-name: slideDown; 
} 

.container:not(:hover) > #test2 { 
    -webkit-animation-delay:1000ms; 
    -webkit-animation-name: slideUp; 
    opacity:1; 
} 

@-webkit-keyframes slideDown { 
    0% { 
     -webkit-transform: translateY(0); 
    } 
    100% { 
     -webkit-transform: translateY(135px); 
    } 
} 

@-webkit-keyframes slideUp { 
    0% { 
     -webkit-transform: translateY(135px); 
    } 
    100% { 
     -webkit-transform: translateY(0); 
    } 
}

fonte

2012-12-31 09:20:14

L'esempio non sembra funzionare in Firefox ... potresti voler aggiungere '@ -moz-keyframes' forse? – tchap

Ha detto che ha solo scritto -webkit in alto ... –

@Pranav Kapoor Puoi fare lo stesso trucco con questo jsfiddle jsfiddle.net/sP5h/7/.. jsfiddle seguente (contrassegnato come una risposta e con un aumento di voti) Grazie per l'aiuto. Era un codice geniale. –

Utilizzare il passaggio di farlo come di seguito:

<head> 
     <style> 
      #outer { 
       width: 100px; 
       height: 50px; 
       background-color: green; 
       position: relative; 
      } 
      #innerOne { 
       width: 100px; 
       height: 50px; 
       background-color: blue; 
      } 
      #innerTwo { 
       width: 100px; 
       height: 50px; 
       background-color: red; 
       position: absolute; 
       top: -150px; 
       left: 100px; 

      } 

      #outer:hover #innerTwo { 
       top: 0px; 

       -webkit-transition: top 2s ease-out; 
       -moz-transition: top 2s ease-out; 
       -o-transition: top 2s ease-out; 
       transition: top 2s ease-out; 
      } 
      #innerTwo:not(hover) { 
       -webkit-transition: top 1s ease-in 3s; 
       -moz-transition: top 1s ease-in 3s; 
       -o-transition: top 1s ease-in 3s; 
       transition: top 1s ease-in 3s; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="innerOne">wxyz</div> 
      <div id="innerTwo">abcd</div> 
     </div> 
    </body> 
</html>

fonte

2012-12-31 09:26:49 benbai123

H ere è una soluzione cross browser:

Testato su OPERA - SAFARI-CHROME - MAXTHON - FIREFOX

HTML:

<div class="container"> 
    <div id="test">wxyz</div>   
    <div id="test2" >abcd</div> 
</div>

CSS:

#test { 
    width:100px; 
    height:100px; 
    background:yellow; 
    position:relative; 
    z-index:2; 
} 
#test2 { 
    top:-100px; 
    width:100px; 
    height:100px; 
    background:black; 
    color:white; 
    position:relative; 
    z-index:1; 
} 
.container:hover #test2 { 
    top:0px; 
    transition-property:top; 
    transition-duration:0.2s; 
    transition-timing-function: linear; 
    /* Firefox 4 */ 
    -moz-transition-property:top; 
    -moz-transition-duration:0.2s; 
    -moz-transition-timing-function:linear; 
    /* Safari and Chrome */ 
    -webkit-transition-property:top; 
    -webkit-transition-duration:0.2s; 
    -webkit-transition-timing-function:linear; 
    /* Opera */ 
    -o-transition-property:top; 
    -o-transition-duration:0.2s; 
    -o-transition-timing-function:linear; 
    /* IE */ 
    -ms-transition-property:top; 
    -ms-transition-duration:0.2s; 
    -ms-transition-timing-function:linear; 
} 
.container:not(:hover) #test2 { 
    top:-100px; 
    transition-property:top; 
    transition-duration:0.2s; 
    transition-timing-function: linear; 
    transition-delay: 3s; 
    /* Firefox 4 */ 
    -moz-transition-property:top; 
    -moz-transition-duration:0.2s; 
    -moz-transition-timing-function:linear; 
    -moz-transition-delay:3s; 
    /* Safari and Chrome */ 
    -webkit-transition-property:top; 
    -webkit-transition-duration:0.2s; 
    -webkit-transition-timing-function:linear; 
    -webkit-transition-delay:3s; 
    /* Opera */ 
    -o-transition-property:top; 
    -o-transition-duration:0.2s; 
    -o-transition-timing-function:linear; 
    -o-transition-delay:3s; 
    /* IE */ 
    -ms-transition-property:top; 
    -ms-transition-duration:0.2s; 
    -ms-transition-timing-function:linear; 
    -ms-transition-delay:3s; 
}

Fiddle: http://jsfiddle.net/BerkerYuceer/2gVLX/

fonte

2012-12-31 10:03:03

Puoi fare lo stesso con questo jsfiddle jsfiddle.net/sP5hg/7/ I numeri dovrebbero scomparire dopo 3 secondi. Grazie mille .. Apprezzo l'aiuto .. Venerato .. –

@ user1928136 qui: http://jsfiddle.net/BerkerYuceer/sP5hg/12/ –

Ma non si limita a ridurre l'opacità a 0. Voglio dire anche se si passa il mouse sopra il menu invisibile, appare di nuovo. Ma apprezzo l'idea. Grazie mille, signore. –

Converti jquery animazione CSS3

risposta

Problemi correlati