Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
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
Člen
Avatar
Ori: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 18.3.2014 22:09
 
Nahoru Odpovědět 18.3.2014 22:09
Avatar
Odpovídá na
kleofas.hatlapatka: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 kleofas.hatlapatka
: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
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 19.3.2014 19:00
 
Nahoru Odpovědět 19.3.2014 19:00
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 19.3.2014 19:28
 
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: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 19.3.2014 19:38
 
Nahoru Odpovědět 19.3.2014 19:37
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 19.3.2014 19:39
 
Nahoru Odpovědět 19.3.2014 19:38
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na
Jiří Gracík:19.3.2014 20:05

Jquery na to má funkci

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

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.