Comment afficher ou masquer div, selon la position d'un autre div

Question

je la jquery suivante qui glisse un div horizontalement:

$('.nextcol').click(function() { 
    $('.innerslide').animate({'left': '-=711px'}, 1000); 
}); 

$('.prevcol').click(function() { 
    $('.innerslide').animate({'left': '+=711px'}, 1000); 
}); 

Ce que je veux arriver est ce ... si le div. innerslide a une position qui est gauche: 0px alors je veux cacher div.backarrow. Si la position n'est pas gauche: 0px, alors il le montre.

Toute aide serait grandement appréciée.

EDIT (ajouté balises HTML)

<div class="backarrow prevcol"> 

<div id="mainleft" class="overflowhidden"> 
     <div class="innerslide"> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
     </div> 
</div> 

Answer 1

Essayez ceci:

if ($('.innerslide').css("left") == 0) { 
    $('div.backarrow').hide(); 
} else { 
    $('div.backarrow').show(); 
} 

Fix pour Double-Click Problème: D'après ce que vous avez décrit dans votre commenter le problème lorsque le visiteur double-clic ks, il semble que le double-clic provoque le déclenchement de deux des animations. Pour éviter cela, vous pouvez soit désactiver le gestionnaire de clics pendant l'exécution de l'animation et le réactiver une fois l'opération terminée, soit essayer d'écrire un nouveau thread pour vérifier en permanence la position de l'élément. Une de ces solutions n'est pas une bonne idée - je vais vous laisser deviner laquelle :) - mais l'autre a en fait une solution très simple qui nécessite peu de changement à votre code existant (et peut effectivement réduire vos frais généraux par une minuscule weeny montant):

$('.nextcol').on("click.next", function() { 
    $('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack()); 
    $(this).off("click.next"); 
}); 

$('.prevcol').on("click.prev", function() { 
    $('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward()); 
    $(this).off("click.prev"); 
}); 

Puis ajouter cette cette ligne à showHideBack() (et un complémentaire showHideForward() si vous utilisez que):

$('.nextcol').on("click.next"..... 

Je vous suggère d'écrire une fonction pour définir chaque gestionnaire de clic et un autre pour enlever chacun. Cela rendra votre vie très facile et toute la solution devrait réduire les frais généraux en supprimant les gestionnaires de clic inutiles pendant que l'animation est en cours d'exécution.

Remarque: la méthode animation appelle souvent son rappel avant la fin de l'animation. En tant que tel, vous pouvez utiliser un delay avant d'appeler la méthode showHide....

Laissez-moi savoir si vous avez des questions. Bonne chance! :)

MISE À JOUR:

Voici le updated version du violon vous me avez donné avec tous les bugs aplanies. Il semble que j'ai mal compris une partie de votre objectif dans ma solution originale, mais je l'ai redressé ici.J'ai également inclus la mise à jour jQuery, ici:

var speed = 1000; 
var back = $("div.backarrow"); 
var next = $(".nextcol"); 
var prev = $(".prevcol"); 
var inner = $(".innerslide"); 

function clickNext(index) { 
    next.off("click.next"); 
    inner.animate({ 
     'left': '-=711px' 
    }, speed, function() { 
     back.show(); //this line will only be hit if there is a previous column to show 
      next.delay(speed).on("click.next", function() { 
       clickNext(); 
      }); 
    }); 
} 

function clickPrev() { 
    prev.off("click.prev"); 
    inner.animate({ 
     'left': '+=711px' 
    }, speed, function() { 
     if (inner.css("left") == "0px") { 
      back.delay(speed).hide(); 
      prev.delay(speed).on("click.prev", function() { 
       clickPrev(); 
      }); 
     } else { 
      back.delay(speed).show(); 
      prev.delay(speed).on("click.prev", function() { 
       clickPrev(); 
      }); 
     } 
    }); 
} 

next.on("click.next", function() { 
    clickNext(); 
}); 

prev.on("click.prev", function() { 
    clickPrev(); 
});​ 

J'allais inclure également une condition pour vérifier si vous regardiez la dernière colonne, mais, comme je ne sais pas ce que votre la mise en œuvre finale sera, je ne savais pas si cela serait applicable. Comme toujours, faites-moi savoir si vous avez besoin d'aide ou de clarification à ce sujet. :)

Answer 2

Vous pouvez essayer l'option step - une fonction de rappel qui est tiré à chaque étape de l'animation:

$('.prevcol').click(function() { 
    $('.innerslide').animate({ left: '+=711px' }, 
      { 
       duration: 1000, 
       step: function(now, fx) { 
         if (now === 0) { 
          $('div.backarrow').hide(); 
         } else { 
          $('div.backarrow').show(); 
         } 
       } 
    }); 
}); 

Plus exemples d'utilisation dans cet article The jQuery animate() step callback function