4

I'm creating a little game where a user selects from a set of items then the selected items are shuffled and one is chosen.

I'm using jQuery cycle (http://jquery.malsup.com/cycle/) to run the main animation and select a random item (using the random order feature and a custom animation).

However, the way I'm animating the items means I need them to all remain visible while they're animating - they're all positioned absolutely.

So here's the question: Is there a way to stop jQuery cycle from applying display: none; to all of the items before it starts?

I don't mind modifying the original script to do this if necessary.

$('#item-container').cycle({ 
    fx: 'custom',
    cssBefore:{
        left: 0,
        top: 0,
        display: 'block',
        zIndex: 1
    },
    animIn: {
        left: 200,
        top: 200
    },
    animOut: {
        left: 0,
        top: 0
    },
        cssAfter:{
        zIndex: -40,
        display: 'block'
    },
    speed:  400,
    timeout: 400,
    random: 1,
    autostop: 1,
    autostopCount: 25,
    continuous: 1,
    slideExpr: 'div.selected'
});

Thanks!

samlester
  • 335
  • 3
  • 18

1 Answers1

1

Try adding !important in your CSS. Normally, inline css (for instance, like that set by the cycle plugin) will override css in your stylesheet. However, if you use !important, that will take precedence.

Philip Schweiger
  • 2,714
  • 1
  • 18
  • 27
  • 1
    I ran a test locally, and it is working - but I noticed that the plugin also sets the opacity. So you'll need to do `opacity:1 !important;` as well. Of course, then you end up with a visual mess, so I'm not sure why you want to stop the items from not displaying - is that really what you want, or are you trying to do something different? – Philip Schweiger Sep 13 '11 at 13:46