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()
        });
    });
});

JSFiddle Przykład

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