Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Avatar
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
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Honzs Sedlomn
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ář
Avatar
Odpovídá na Jan Lupčík
Honzs Sedlomn:14.9.2015 19:09

Zkouším, ale stále nefunguje

 
Nahoru Odpovědět
14.9.2015 19:09
Avatar
Odpovídá na Jan Lupčík
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
Avatar
00
Člen
Avatar
Odpovídá na Honzs Sedlomn
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
Avatar
00
Člen
Avatar
Odpovídá na 00
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
Avatar
00
Člen
Avatar
Odpovídá na Honzs Sedlomn
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
Avatar
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Honzs Sedlomn
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ář
Avatar
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í
Řešení problému
 
Nahoru Odpovědět
15.9.2015 6:49
Avatar
00
Člen
Avatar
Odpovídá na TomasGlawaty
00:15.9.2015 19:15

To je to co jsem napsal já, ne?

 
Nahoru Odpovědět
15.9.2015 19:15
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na 00
TomasGlawaty:15.9.2015 19:42

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

 
Nahoru Odpovědět
15.9.2015 19:42
Avatar
00
Člen
Avatar
Odpovídá na TomasGlawaty
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
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na 00
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ář
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na 00
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
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.