$(this).next().hasClass() not working with UI effects
Go easy on me as I am brand new to jquery but I can not get what
appears to be some very simple code to work properly. I am trying to
loop through a set of div panels showing and hiding them one at a
time. If I use the standard show and hide effects this works great but
if I trying to use any of the UI effects this does not work. Any
ideas?
<style>
.panel{
width: 600px;
height: 400px;
}
</style>
<script>
$(document).ready(function(){
$(".panel:not(:first)").hide();
$(".panel").click(function(){
//If you comment out this line below
$(this).hide("slide", { direction: "left" }, 500);
//...and uncomment this line below, it works fine.
//$(this).hide("slow");
if($(this).next().hasClass("panel")){
$(this).next().show("slow");
}else{
$(".panel:first").show("slow");
}
});
});
</script>
<div class="panel" style="background-color: silver">1</div>
<div class="panel" style="background-color: green">2</div>
<div class="panel" style="background-color: red">3</div>
<div class="panel" style="background-color: blue">4</div>
Probably a noob mistake but thanks for the help,
Jason