Avatar

Člen
Avatar
:

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
Člen
Avatar
Ori:

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 18.3.2014 22:09
 
Nahoru Odpovědět 18.3.2014 22:09
Avatar
Odpovídá na
kleofas.hatlapatka:

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 kleofas.hatlapatka
:

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
Odpovídá na
Matyáš Procházka:

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
:

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 19.3.2014 19:00
 
Nahoru Odpovědět 19.3.2014 19:00
Avatar
Odpovídá na
Matyáš Procházka:

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 19.3.2014 19:28
 
Nahoru Odpovědět 19.3.2014 19:26
Avatar

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

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:

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 19.3.2014 19:38
 
Nahoru Odpovědět 19.3.2014 19:37
Avatar
Odpovídá na
Matyáš Procházka:

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 19.3.2014 19:39
 
Nahoru Odpovědět 19.3.2014 19:38
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 19.3.2014 20:05
Creating websites is awesome till you see the result in another browser ...
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.