vendredi 27 novembre 2015

if background = url() - issue on IE

I am trying to achieve a situation where an animation is triggered if an element has a particular background = url(" "). I am using velocity.js as the animation plugin and am able to achieve this no problem on all browser except IE, in which it fails to recognise the background url in the if statement.

I have two examples in the code below.

The first one (the orange square) uses -

if (box.style.background == "orange")
    { run(); }

to determine whether to run the animation. IE is fine with this.

However the second (the pink triangle) uses -

if (triangle.style.background == "url(http://ift.tt/1Nc5BZe) no-repeat")
    { runTriangle(); }

to determine whether to run the animation. IE is the only browser not to run this.

Does anyone have any idea where I'm going wrong here.

JS Fiddle example

HTML

<div id="box"></div>

<div id="triangle"></div>

CSS

#box {
width: 100px;
height: 100px;
position: absolute; }

#triangle {
width: 200px;
height: 100px;
top: 120px;
position: absolute;
z-index: 4; }

JS

window.setInterval(function runAll() {

var box = document.getElementById('box');

box.style.background = "orange";

function run() {
    Velocity(box, {left: 300}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    Velocity(box, {left: 10}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    }

if (box.style.background == "orange")
{ run(); } 

var triangle = document.getElementById('triangle');

triangle.style.background = "url(http://ift.tt/1Nc5BZe) no-repeat";

function runTriangle() {
    Velocity(triangle, {left: 300}, {easing: "easeInOutQuad", duration: 1000, delay: 200});
    Velocity(triangle, {left: 10}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    }

if (triangle.style.background == "url(http://ift.tt/1Nc5BZe) no-repeat")
{ runTriangle(); } 

}, 1000);

runAll();

Aucun commentaire:

Enregistrer un commentaire