Funkcjonalność docelową jest rozszerzenie i zwinąć pole formularza, klikając obraz, jak widać na skrzypce (http: // jsfiddle .NET / PHAMOUPHIL / 4JW42KZA /). Obecnie rozszerzyłem pracę przy użyciu .animate(), jednak po wielu bzdurach nie mogę znaleźć sposobu na upadek.
Moje pytanie brzmi: 1. Jak mogę wdrożyć przeciwległą animację, aby zwinąć formularz podczas klikania obrazu? 2. (Bonus) Jak mogę użyć .animate(), aby wykorzystywać CSS {X1}}, aby w pełni ukryć formularz po zawalonym? Moja próba wdrożenia tego nie powiodła się.
Kod poniżej:
HTML:
<input class='header-search-box' type='text' id='search-string' name='search-string'>
<img src=' http://findicons.com/files/icons/974/glyphish/18/magnifying_glass.png' class='magnifying-glass' />
CSS:
.header-search-box {
}
.header-search-box {
width: 0px;
}
.magnifying-glass {
}
JavaScript:
$(function(){
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function(){
form.animate({'width': '100px'}, 'slow');
});
});
1
phamousphil
14 sierpień 2014, 19:57
2 odpowiedzi
Najlepsza odpowiedź
$(function () {
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function () {
if (form.is(':hidden')) form.show()
form.animate({
'width': form.width() == 100 ? '0px' : '100px'
}, 'slow', function () {
if (form.width() == 0) form.hide()
});
});
});
2
j08691
14 sierpień 2014, 16:12
Możesz łatwo go osiągnąć, przełączając klasę "rozszerzoną" i przy użyciu CSS3 do obsługi animacji (i widoczności):
CSS:
.header-search-box {
visibility: hidden;
width: 0;
transition: all 0.3s ease;
}
.expanded {
visibility: visible;
width: 100px;
}
JS:
$(function(){
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function(){
form.toggleClass('expanded');
});
});
Skrzypce tutaj: http://jsfiddle.net/8rlmokp1/
2
o--oOoOoO--o
14 sierpień 2014, 16:10