Diskuze: Zvětšení search baru zprava doleva

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Honzs Sedlomn

Člen

Honzs Sedlomn:14.9.2015 18:44

Ahoj, snažím se vytvořit stejný search bar jako na této stránce: http://powergame-themexpose.blogspot.in/

Mám jenom tohleto

$(document).ready(function(){
        $("#search").mouseenter(function(){
                $(this).stop().animate({marginLeft:'-40',width:"181"},300)
                /*function(){
                        $(this).animate({marginLeft:'0',width:"141"},300)
                });*/
        });
        $("#search").mouseleave(function(){
                $(this).animate({marginLeft:'0',width:"141"},300);
        });
});

Bohužel kod sice funguje, ale opravdu špatně. Jednou se to zasekne, jednou se to nevrátí atd. Neporadí někdo?

Odpovědět

14.9.2015 18:44

Jan Lupčík

Tvůrce

Jan Lupčík:14.9.2015 18:59

Jde to vyřešit v CSS. Podívej se na vlastnosti transition-*.

Nahoru Odpovědět

14.9.2015 18:59

TruckersMP vývojář

Honzs Sedlomn

Člen

Honzs Sedlomn:14.9.2015 19:09

Zkouším, ale stále nefunguje

Nahoru Odpovědět

14.9.2015 19:09

Honzs Sedlomn

Člen

Honzs Sedlomn:14.9.2015 19:10

Chtěl bych aby se to pouze zdelšilo zprava doleva. Když to zkouším přes CSS tak se to nejdřív celé pohne doprava a až potom pomalu se ten searchbox prodlužuje doleva

Nahoru Odpovědět

14.9.2015 19:10

Člen

00:14.9.2015 19:18

CSS

position:absolute;
right: neco;
width:sirka;

Snad to půjde, right: odsazení zprava,
width:sirka.

Nahoru Odpovědět

14.9.2015 19:18

Člen

00:14.9.2015 19:24

A přes js to zvětší š, bez animací. U jquery to je:

.css('width','šířka')

A v CSS

transition: 1s width;

1s == doba trvání, můžeš zkrátit.

Nahoru Odpovědět

14.9.2015 19:24

Člen

00:14.9.2015 19:24

Mě se nic nezvětšuje.

Editováno 14.9.2015 19:25

Nahoru Odpovědět

14.9.2015 19:24

Honzs Sedlomn

Člen

Honzs Sedlomn:14.9.2015 19:27

Tak už jsem se díky vašim radím dostal sem http://jsfiddle.net/h53m45ua/
Teď už jenom, aby ten přechod doleva byl také plynulý.

Nahoru Odpovědět

14.9.2015 19:27

Jan Lupčík

Tvůrce

Jan Lupčík:14.9.2015 20:02

Musíš pustit oba naráz. Nevím, jak to děláš ty, mně normálně fungují 2 efekty najednou.

Nahoru Odpovědět

14.9.2015 20:02

TruckersMP vývojář

Honzs Sedlomn

Člen

Honzs Sedlomn:15.9.2015 6:49

Díky všem, zjistil jsem, že problém byl v prohlížečí. Firefox to prostě nějak nechtěl udělat správně.

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

15.9.2015 6:49

TomasGlawaty

Člen

TomasGlawaty:15.9.2015 14:39

http://jsfiddle.net/hzz8Ldzo/

Nahoru Odpovědět

15.9.2015 14:39

Člen

00:15.9.2015 19:15

To je to co jsem napsal já, ne?

Nahoru Odpovědět

15.9.2015 19:15

TomasGlawaty

Člen

TomasGlawaty:15.9.2015 19:42

ano, podobně, ale JS na to není potřeba

Nahoru Odpovědět

15.9.2015 19:42

Člen

00:15.9.2015 20:18

Myslel jsem že to má být při psaní.

(To by asi taky šlo v CSS, že? Myslím že ano)

Nahoru Odpovědět

15.9.2015 20:18

Jan Lupčík

Tvůrce

Jan Lupčík:15.9.2015 20:30

Ano, jde. Přes element :focus.

input:focus {
    /* CSS */
}

Nahoru Odpovědět

15.9.2015 20:30

TruckersMP vývojář

TomasGlawaty

Člen

TomasGlawaty:15.9.2015 20:53

Na tom webu co postoval to je při najetí i při focusu, takže drobná úprava, tak jak píše IT Man:
http://jsfiddle.net/hzz8Ldzo/1/

Nahoru Odpovědět

15.9.2015 20:53

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 16 zpráv z 16.

Nejčastěji vyhledáváné

Diskuze: Zvětšení search baru zprava doleva