Question

All,

I have three cards which can be shuffled by the user, upon hover, the target card pops to the top, the last card on top should sit in the second position. While with the code below, I can have this effect in one direction (left to right), I am struggling to come up with logic & code for getting the effect to work in both directions without having to write multiple scenarios in js (which doesnt sound like very good logic).

Hopefully the demo will do a better explanation.

Code:

$(".cBBTemplates").on (
{
    hover: function (e)
    {
        var aBBTemplates = document.getElementsByClassName ("cBBTemplates");
        var i = 2;
        while (i < aBBTemplates.length && i >= 0)
        {
            var eCurVar = aBBTemplates[i];
            if (eCurVar === e.target)
            {
                eCurVar.style.zIndex = 3;
            }   else if (eCurVar.style.zIndex === 3)    {
                console.log (eCurVar);
                eCurVar.style.zIndex = 3-1;
            }   else
            {
                eCurVar.style.zIndex = i;
            }
            i--;
        }
    }
});

Answer 1

Try this:

$(function(){
    var current = 2;
   $(".cBBTemplates").on (
{
    hover: function ()
    {
      var target = this,
      newCurrent, templates = $(".cBBTemplates");

      templates.each(
        function(idx){
           if(this === target){
             newCurrent = idx;
           }
       });

  if(newCurrent === current){return;}


      templates.each(function(index){
          var zIndex = 0;
        if(this === target) {
          zIndex = 2;
        }
        else if (index == current) {
          zIndex = 1; 
        }

        $(this).css('zIndex', zIndex);

      });

      current = newCurrent;
    }
});

});