Diskuze: Plynulé zobrazení

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Člen

: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

Ori I

Člen

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 18.3.2014 22:09

Nahoru Odpovědět

18.3.2014 22:09

KleoCZ

Člen

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...

Člen

: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

Matyáš Procházka

Člen

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

Člen

: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

Matyáš Procházka

Člen

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

Člen

: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

Matyáš Procházka

Člen

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

Matyáš Procházka

Člen

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

Neaktivní uživatel

Tvůrce

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.

Nejčastěji vyhledáváné

Diskuze: Plynulé zobrazení