Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar

Člen
Avatar
:18.3.2014 20:35

Zdravím, nevíte jaktože se obrázek ihned zobrazí? Má se zobrazit plynule.

$(document).ready(function(){
        $("#domu1").hover(function() {
            $("#domu1 img")
                .attr("src", "css/obrazky/domu2.png")
                .animate({ opacity: "1" }, 500);
        },
        function() {
            $("#domu1 img")
                .attr("src", "css/obrazky/domu1.png")
                .animate({ opacity: "1" }, 500);
        });
});
 
Odpovědět
18.3.2014 20:35
Avatar
Ori I
Člen
Avatar
Ori I:18.3.2014 22:09

co to skusit cez CSS 3, niesom na to expert(ani css ani jquery) bohuzial ti neposlem kod.

tvoj problem tu spociva mozno v tom ze animate volas ako chain a nie ako callback cize sa moze spustit "predtym" ako sa uplne nacita ten dany obrazok(ale ako vravim niesom expert)
Ak sa mylim opravte ma

Editováno
 
Nahoru Odpovědět
18.3.2014 22:09
Avatar
KleoCZ
Člen
Avatar
Odpovídá na
KleoCZ:19.3.2014 7:48

Zdar, bylo by dobré k tomu připojoval i část kódu html a css, zrovna v tom css by to mohlo být zkopané ...

jinak tu jsem vytvořil model, tak jak jsem pochopil zadání http://jsfiddle.net/Kleo86/63Vh2/

... všimni si, že v css mám opacity:0.1 a jquery pak manipuluje na opacity:1 a to za 5s (5000 milisekund) pozor na to !!! Ty máš nastaveno 500 což se rovná 0.5s to je skoro probliknutí.

Snad jsem pomohl, měj se ;)

Nahoru Odpovědět
19.3.2014 7:48
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar

Člen
Avatar
Odpovídá na KleoCZ
:19.3.2014 15:01

Bohužel mi to nefunguje, proto přikládám kousky kódu. Jde o to, že mám obrázek, který má bílou barvu a potřebuji aby při najetí změnil plynule barvu na zelenou.
HTML:

<div id="domu">
                                <a href="index.html" id="domu1"><img src="css/obrazky/domu1.png" alt="Domů" /></a>
                        </div>

CSS:

#domu1 {
        position: relative;
        opacity: 1;
}

#domu {
        position: relative;
        width: 45px;
        height: 45px;
        top: -152px;
        left: 590px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        background: url('obrazky/pozadi1.PNG');
}
 
Nahoru Odpovědět
19.3.2014 15:01
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na
Matyáš Procházka:19.3.2014 17:37

Pokud si všimneš, tak na obou dvou animacích máš opacity=1... co se tedy provede při najetí, je, že se změní obrázek a začne se animovat opacity na 1, jenže to už na 1 je, a tak se nemá, co animovat... Podle toho co chceš, tak nejdřív musíš animací snížit opacity a pak začít navyšovat....

 
Nahoru Odpovědět
19.3.2014 17:37
Avatar

Člen
Avatar
Odpovídá na Matyáš Procházka
:19.3.2014 19:00

A kdybych nechtěl snižovat opacity? A zkoušel jsem snížit opacity a dát 5s, ale i tak jen probliklo...

Editováno
 
Nahoru Odpovědět
19.3.2014 19:00
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na
Matyáš Procházka:19.3.2014 19:26

Kdybys nechtěl snižovat opacity, tak to nejspíš neprovedeš :) Maximálně můžeš snížit opacity tak, že ho prostě nastavíš na 0. Ale pokud to chceš animovaně, tak to bude vypadat zhruba takhle:

Tady přidávám demonstraci:
http://jsfiddle.net/LeWYd/2/

Edit: kdybys něčemu nerozuměl v kódu, ptej se ;)

$(document).ready(function () {
    $("#domu1").hover(function () {
        $("#domu1 img").animate({
            "opacity": 0
        }, {
            complete: function () {
                $("#domu1 img").attr("src", "css/obrazky/domu2.png").animate({
                    "opacity": 1
                }, 500);

            }
        }, 500);
    },

    function () {
        $("#domu1 img").animate({
            "opacity": 0
        }, {
            complete: function () {
                $("#domu1 img").attr("src", "css/obrazky/domu1.png").animate({
                    "opacity": 1
                }, 500);

            }
        }, 500);
    }


    )
});
Editováno
 
Nahoru Odpovědět
19.3.2014 19:26
Avatar

Člen
Avatar
Odpovídá na Matyáš Procházka
:19.3.2014 19:36

To comlete je když se dokoná opacity na 0, tak se se začne provádět na opacity na 1, rozumím tomu správně?

 
Nahoru Odpovědět
19.3.2014 19:36
Avatar
Matyáš Procházka
Člen
Avatar
Matyáš Procházka:19.3.2014 19:37

Jenom technický detail, aby se na to nedalo najíždět nekonečněkrát, a pak by to dělalo ty animace tiscíkrát za sebou...

Demostrace:
http://jsfiddle.net/LeWYd/3/

u prvního animate přidej funkci stop() a to samý u třetího animate...

$("#domu1 img").stop().animate({
Editováno
 
Nahoru Odpovědět
19.3.2014 19:37
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na
Matyáš Procházka:19.3.2014 19:38

Jojo, to complete se provede po tom, co se dokoná ta první funkce, ať je to cokoli.... :)

zkráceně:

$("test").animate({funkce},{complete: funkce}, čas);
Editováno
 
Nahoru Odpovědět
19.3.2014 19:38
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na
Neaktivní uživatel:19.3.2014 20:05

Jquery na to má funkci

https://api.jquery.com/fadeTo/

Nahoru Odpovědět
19.3.2014 20:05
Neaktivní uživatelský účet
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 11 zpráv z 11.