jQuery Animate - colore del bordo e la larghezza

io non riesco a ottenere questa animazione jQuery lavorando per applicare un bordo a un'immagine su mouseenter:jQuery Animate - colore del bordo e la larghezza

<div> 
    <img src="http://25.media.tumblr.com/acc96259d6b2678985052c33e05a3062/tumblr_mkv9fhDBDS1rmc58qo1_500.jpg" /> 
</div>

jQuery

$('div img').mousenter(function(){ 
    $(this).css({"border": "0px solid #f37736"}).animate({ 
     'borderWidth': '4px', 
     'borderColor: '#f37736' 
    },500); 
}).mouseleave(function(){ 
    $(this).animate({ 
     'borderWidth':'0px', 
     'borderColor:'#f37736' 
    },500); 
});

Ho anche provato a rimuovere la parte CSS per jQuery, ma non funziona

fonte

2013-05-28 DextrousDave

sei solo avendo paio di errori di battitura lì. Vedi corretto fiddle: http://jsfiddle.net/h6jg4/ –

Mi chiedo solo, non hai una console nel tuo browser? –

$.animate() funziona solo sulle proprietà CSS che hanno valori numerici singoli. Pertanto, è sufficiente specificare la larghezza del bordo, poiché la proprietà border-color viene ignorata da $.animate().

A parte questo, l'evento è mouseenter, non mousenter.

Ecco il codice fisso:

$('div img').mouseenter(function() { 
    $(this).css({border: '0 solid #f37736'}).animate({ 
     borderWidth: 4 
    }, 500); 
}).mouseleave(function() { 
    $(this).animate({ 
     borderWidth: 0 
    }, 500); 
});

Demo

fonte

2013-05-28 13:34:48

grazie. La tua risposta è molto completa – DextrousDave

non c'è un modo per rendere l'animazione fluida, in modo che l'immagine non si muova quando viene applicato il bordo? Probabilmente posso farlo cambiando il colore del bordo da bianco (sfondo) ad arancione ma hai detto che il colore non funziona.animate() – DextrousDave

@DextrousDave, se si utilizza anche l'interfaccia utente jQuery, è possibile animare anche la proprietà background-color, passando da uno sfondo bianco 4px a uno sfondo arancione 4px. –

jQuery non può animare il colore ma è proprio, è necessario includere un separatore e jQuery plugin per questo.

fonte

2013-05-28 13:30:49 Alex

perché è downvoted? – Alex

codice fisso:

http://jsfiddle.net/9qwmX/491/

$('div img').mouseenter(function() { 
    $(this).css({ 
     outline: "0px solid transparent" 
    }).animate({ 
     outlineWidth: '4px', 
     outlineColor: '#f37736' 
    }, 500); 
}).mouseleave(function() { 
    $(this).animate({ 
     outlineWidth: '0px', 
     outlineColor: '#037736' 
    }, 500); 
});

fonte

2013-05-28 13:32:16

grazie. Un modo per rendere la transizione omogenea in modo che l'immagine non si sposti? – DextrousDave

puoi anche animare il margine, guarda la risposta aggiornata –

@roasted, la tua soluzione di margine lo rende meno, non più, liscio! –

Cambia la tua jQuery per questo

$('div img').mouseenter(function(){ 
    $(this).css("border", "0px solid #f37736").animate({ 
     'borderWidth': '4px', 
     'borderColor': '#f37736' 
    },500); 
}).mouseleave(function(){ 
    $(this).animate({ 
     'borderWidth':'0px', 
     'borderColor':'#f37736' 
    },500); 
});

fonte

2013-05-28 13:33:02

grazie, questo funziona – DextrousDave

Hai alcuni errori di battitura nel codice

.mousenter deve essere .mouseenter
non ha chiuso l'apostrofo in entrambi 'borderColor. cambiarli a 'borderColor'

$('div img').mouseenter(function(){ 
    $(this).css("border", "0px solid #f37736").animate({ 
     'borderWidth': '4px', 
     'borderColor': '#f37736' 
    },500); 
}).mouseleave(function(){ 
    $(this).animate({ 
     'borderWidth':'0px', 
     'borderColor':'#f37736' 
    },500); 
});

fonte

2013-05-28 13:33:59

jQuery Animate - colore del bordo e la larghezza

risposta

Problemi correlati