Question

So my script works but the issue I am having is that when i use the close-but function it hides the div, but after a few seconds the div slidesdown. Am I missing something with like a if statement? Thank you.

$(document).ready(function() {
    $(".cart").hover(function() {
        $(".dropcart").slideDown('slow');
     });
    $('.dropcart').mouseleave(function() {
        $('.dropcart').css({
            'opacity': '.5'
        }, setTimeout(function() {
            $('.dropcart').slideUp('slow');
        }, 3000));
         });
    $('.dropcart').mouseenter(function() {
        $('.dropcart').css({
            'opacity': '1'
        });
    });
        $('.close-but').click( function() {
    $('.dropcart').hide();
    });
    });

Answer 1

hover is a shorthand for the mouseenter/mouseleave handlers (see: http://api.jquery.com/hover/).

I tend not to use hover for more complex interactions since, as you’ve discovered, there are some quirks to how the event handler works. I’ve found that binding an event handler to hover fires the handler twice. Instead, what you should do is:

$('.cart').mouseenter( function(){
    // Your state behaviour code here..
} ).mouseleave( function(){
    // Your state behaviour code here...
} );

One think you might want to consider using is jquery’s livequery plugin, which improves event binding/handling for DOM elements. So, your example could be refactored to look something like this:

Edits:
Changed pathing to find the parent element that contains both .cart and .dropcart

$('.cart').livequery( function(){
    var obj      = $( this ).closest('.float-left'); // The cart container element
    var dropcart = obj.find('.dropcart'); // Child of .float-left
    var close    = dropcart.find('.close-but');  // Child of dropcart

    // Handle cart mouseenter event
    obj.mouseenter( function(){
        dropcart.slideDown(300);
    } );

    // Handle cart moseenter/mouseleave events
    dropcart.mouseenter( function(){
        // your behaviour here...
    } ).mouseleave( function(){
        // your behaviour here...
        // Read up on jQuery's delay() method: http://api.jquery.com/delay/
        dropcart.delay(800).slideUp(256);
    } );

    // Handle the close button
    close.click( function(){
        dropcart.hide(); // or dropcart.mouseleave(); // triggers the mouseleave event handler
    } );

} );

Update

I didn’t see the fiddle in the initial comments, and now that I understand the structure, I’ve revised the examples above to reflect (see revisions above). A couple additional things I would also recommend doing:

1. Add an ID or common class to the containing element, e.g.
   class="cart-container float-left" or id="cart-container"
2. Consider refactoring the markup to be a little more semantic considering the content that appears in there. (I know some folks would argue that there’s little value in doing that with JS enhanced features, but I still think it’s a good habit to get into).

An example of the html refactoring would be:

<div class="item-container right">
    <img src="http://news.worldwild.org/wp-content/uploads/2008/09/red_panda.jpg">

    <div class="cart-items">
        <h3>Cart Items: <span class="cart-items-count">10</span></h3>
        <div class="dropcart">
            <dl class="cart-items-list">
                <dt>Items:</dt>
                <dd>10</dd>
                <dt>Price:</dt>
                <dd>$5.00</dd>
            </dl>
            <a href="#" class="close" title="close">x</a>
        </div>
    </div>
</div>​

Supporting CSS:

.right {
    float: right;
}

.item-container > img {
    display: block;
    margin: 0 0 10px 0; padding :0; 
    border: 0;

    width: 100px; height: auto;
}

.item-container .cart-items {
    display: block;
    background: #222;
    color: #fff;
}

.cart-items {
    display: block;
    margin: 0; padding :0; 
}

.cart-items > h3 {
    cursor: pointer;
}

.cart-items-list dt {
    display: inline;
    float: left;
    clear: right;
}

.cart-items-list dd {
        text-align: right;
}

.dropcart .close {
    display: block;
    padding: 0 10px;

    font-weight: bold;
    text-align: right;

    color: #fff;
}​

Your jQuery script would be something like:

jQuery( function(){

    $('.item-container').livequery( function(){
        var obj      = $( this ).find('.cart-items'); // The cart container element
        var dropcart = obj.find('.dropcart'); // Child of .float-left
        var close    = dropcart.find('.close');  // Child of dropcart

        dropcart.hide();

        // Handle cart mouseenter event
        obj.mouseenter( function(){
            dropcart.slideDown(300);
        } );

        // Handle cart moseenter/mouseleave events
        dropcart.mouseenter( function(){
            // your behaviour here...
        } ).mouseleave( function(){
            // your behaviour here...
            // Read up on jQuery's delay() method: http://api.jquery.com/delay/
            dropcart.slideUp(256);
        } );

        // Handle the close button
        close.click( function(){
            dropcart.mouseleave( function(e){ return false; }); // triggers the mouseleave event handler
            dropcart.hide();
        } );

    } );

} );
​

You can see it in action here: http://jsfiddle.net/kwbbh/2/ (forked the OPs fiddle)
​