Avatar
hanisek.sedlon:

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  +1 14.9.2015 18:44
Avatar
IT Man
Redaktor
Avatar
Odpovídá na hanisek.sedlon
IT Man:

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

Nahoru Odpovědět 14.9.2015 18:59
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Odpovídá na IT Man
hanisek.sedlon:

Zkouším, ale stále nefunguje

 
Nahoru Odpovědět 14.9.2015 19:09
Avatar
Odpovídá na IT Man
hanisek.sedlon:

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 hanisek.sedlon
00:

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:

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 hanisek.sedlon
00:

Mě se nic nezvětšuje.

Editováno 14.9.2015 19:25
 
Nahoru Odpovědět 14.9.2015 19:24
Avatar
hanisek.sedlon:

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
Avatar
IT Man
Redaktor
Avatar
Odpovídá na hanisek.sedlon
IT Man:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
hanisek.sedlon:

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
TomasGlawaty
Člen
Avatar
Nahoru Odpovědět  +1 15.9.2015 14:39
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
00
Člen
Avatar
Odpovídá na TomasGlawaty
00:

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:

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

Nahoru Odpovědět 15.9.2015 19:42
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
00
Člen
Avatar
Odpovídá na TomasGlawaty
00:

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
IT Man
Redaktor
Avatar
Odpovídá na 00
IT Man:

Ano, jde. Přes element :focus. :)

input:focus {
    /* CSS */
}
Nahoru Odpovědět  +2 15.9.2015 20:30
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na 00
TomasGlawaty:

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  +1 15.9.2015 20:53
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
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.