Come rendere mouseenter, mouseleave attivare in una funzione

Mi sono guardato intorno e ho trovato una soluzione, ma mi chiedevo se ci fosse un modo per scrivere codice più semplice. Fondamentalmente ciò che ho creato è una semplice dissolvenza in dissolvenza, effetto dissolvenza per un'immagine.Come rendere mouseenter, mouseleave attivare in una funzione

$(document).on('mouseenter','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
}); 

$(document).on('mouseleave','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
});

So che si può mettere la MouseEnter, MouseLeave insieme, ma non so come strutturare la levetta funzioni in quel modo. Per favore fatemi sapere come semplificare questo.

fonte

2015-09-27 riotgear

'" usa strict ";' è qualcosa che scrivi una volta all'inizio del tuo file JS - non in ogni singola funzione ... E se vuoi gestire questi due eventi con una funzione di callback, probabilmente vorrai un modo per sapere quale evento si trovava all'interno della funzione di callback. Quindi, guarda le proprietà dell'oggetto evento (e rendi la tua funzione come il primo parametro.) – CBroe

È perfettamente legittimo definire "use strict" a livello di funzione se non vuoi che si applichi altrove. – duncanhall

C'è un motivo per cui vuoi ottenere questo effetto con Javacscript? È possibile ottenere esattamente quello che cerchi grazie CSS puro:

#an-image { 
    opacity: 0.2; 
    transition: opacity 0.8s linear; 
} 

#an-image:hover { 
    opacity: 1; 
    transition: opacity 0.8s linear; 
}

si può vedere un esempio di lavoro qui: http://jsfiddle.net/oqqx1z3k/

È possibile visualizzare this example di vederlo in combinazione con l'esempio che hai dato.

fonte

2015-09-27 20:33:21 duncanhall

Mi piace l'idea di usare il css diretto, ma nel mio caso c'è un'immagine che sfuma sopra un'altra immagine. Quindi è un'immagine due entrambe posizionate in modo assoluto all'interno dello stesso div. – riotgear

Non sembra che ci sia un motivo per cui i CSS non funzionerebbero. Se credi che ci sia, pubblica un'altra domanda che descriva il vero problema. – duncanhall

Aggiungo un campione di violino a quello che sto cercando di ottenere. http://jsfiddle.net/galnova/36uzbndo/29/ – riotgear

$('.photos div').hover(
    function() { 
    // MOUSE ENTER 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, function() { 
    // MOUSE LEAVE 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
);

EDIT: il selettore di legare funzione non è documentare, è '.photos div'

fonte

2015-09-27 20:34:51

Necessità di ripensare 'hover' su' documento' ...solo il tempo che il mouse lascia è nella barra degli strumenti del browser o lasciando la finestra del browser – charlietfl

@charlietfl hai ragione, ho appena modificato il selettore :) –

il problema sarà che l'OP probabilmente delegherà l'evento a rendere conto di elementi futuri che non esistono già – charlietfl

È possibile distinguere usando event.type

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': opacity }, 800); 
});

anche il metodo fadeTo() è lo stesso che l'animazione è utilizza

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().fadeTo(800, opacity); 
});

fonte

2015-09-27 20:41:29 charlietfl

È possibile utilizzare event.type per raggiungere questo obiettivo con una sola levetta funzioni come segue:

function toggleAnimation(eventName) 
 
{ 
 
    "use strict"; 
 
    
 
    $(document).find('img.nocolor').stop().animate({ 'opacity': 
 
      (eventName == 'mouseenter') ? '0' : '1' }, 800); 
 
} 
 

 

 
$(document).ready(function(){ 
 

 
    $(document).on('mouseenter mouseleave','.photos div',function (event) { 
 
    toggleAnimation(event.type); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="photos"> 
 
    <div> 
 
<img width="300px" src="http://www.lb.undp.org/content/dam/lebanon/img/AboutLebanon/Lebanon.png" class="nocolor" /> 
 
    </div> 
 
</div>

fonte

2015-09-27 20:42:37 KAD

Grazie mille per aver semplificato questo per me. A volte lavoro all'indietro e non vedo quanto possa essere semplice qualcosa! – riotgear

Sei il benvenuto – KAD

non ho la prova questo, ma ho beleive è possibile utilizzare la funzione .fadetoggle() che farà ciò che si desidera.

$('.photos div').on('mouseenter mouseleave',function() { 

    $(this).find('img.nocolor').togglefade('slow'); 
});

$('.photos div').on({ 
    mouseenter: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, 
    mouseleave: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
})

Tuttavia non sono un fan di lavorare con forcella e MouseEnter e mouseLeave semplicemente perché tali funzioni lavoro basato sul movimento del mouse e non posizione basata sul documento html.

fonte

2016-11-24 17:23:19

Come rendere mouseenter, mouseleave attivare in una funzione

risposta

Problemi correlati