0

Ok, so I want to have the following: when I hover an element, another element should be animated. But so far, this has been to no avail. I'm fairly new to javascript/jquery so please don't be to harsh :p

The javascript/jquery:

$("block").hover(function(){ 
    $(this).find("site").stop(true, false).fadeTo("slow", 0.2);

    $(this).find("textOnImage").stop(true, false).animate({ 
        opacity: "1"
    }, "slow");

    var id = jQuery(this).attr("id");
    if (id == "site1") {
        $("siteLarge").animate({
            backgroundImage: "images/site1large.png"
        }, "slow"); 
    } else if (id == "site2") {
        $("siteLarge").animate({
            backgroundImage: "images/site2large.png"
        }, "slow");
    } else if (id == "site3") { 
        $("siteLarge").stop(true, false).animate({
            backgroundImage: "images/site1large.png"
        }, "slow");
    }
}, function() {         
    $(this).find("site").stop(true, false).fadeTo("slow", 1);
    $(this).find("textOnImage").stop(true, false).animate({ 
        opacity: "0"
    }, "slow");
});

I've tested it with alerts and the source identifying works. However, the 'siteLarge' is not affected by this.

The html:

<div id="centerBlock">
        <block id="site1">
            <site style="position: absolute; margin-left: 10px; margin-top: 10px; border: 1px solid black;">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 10px;">
                Mijn eerste site. Best wel leeg, maar een leuk begin. Een combinatie van html en css.
            </textOnImage>
        </block>

        <block id="site2">
            <site style="position: absolute; margin-left: 10px; margin-top: 163px; border: 1px solid white;">
                <img src="./images/site2.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 163px;">
                Mijn tweede site. Een hele grote vooruitgang ten opzichte van mijn eerste site! Hier wordt interactieve css toegepast.
            </textOnImage>
        </block>

        <block id="site3">
            <site style="position: absolute; margin-left: 10px; margin-top: 316px; border: 1px solid black;">
                <img src="./images/site3.png" alt="some_text"/>
            </site>
            <textOnImage style="position: absolute; margin-left: 10px; margin-top: 316px;">
                Toekomstige plannen: <br> php, msql, ajax.
            </textOnImage>
        </block>

        <large>
            <siteLarge style="position: absolute; margin-left: 250px; margin-top: 10px;">
            </siteLarge>
        </large>

    </div>
8
  • 2
    Any errors in the console? Looks like a strange `\` on one of your animate lines.
    – Jivings
    Feb 9, 2012 at 9:34
  • 3
    What's the deal with those selectors? Do you have tags like <siteLarge> and <textOnImage>?
    – JJJ
    Feb 9, 2012 at 9:37
  • @Jivings yes I've fixed those, these were copy paste errors. Those are not important for the question.
    – Ridz
    Feb 9, 2012 at 9:38
  • Can you animate "background-image" ? Feb 9, 2012 at 9:38
  • 1
    What do you mean by "not affected"? I don't think you can animate backgroundImage like this (and it's not even clear what animating it would mean; animate the opacity? Position? There are several options...). The HTML you just posted isn't HTML. It could be XML, but you didn't clarify this... Please post a jsfiddle or a live URL so we can see what you're trying to achieve.
    – Gijs
    Feb 9, 2012 at 9:54

1 Answer 1

1

If you're looking for a fade transition from one background image to another, you can't do it with .animate(). See transition background-image/css change on hover? for a fade transition solution.

Also, you might need a proper CSS declaration of the new url: backgroundImage: "url(images/site1large.png)". But .animate() will probably just switch to the new image instantly if it works at all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.