Scroll to and Make Div Flash?

Question

I'm trying to make an anchor scroll (animate) to a specific div and then make that div flash 3 times to catch the users attention but I'm not sure what I'm doing incorrectly.. I'm not sure how to get it to scroll and the color doesn't change. How do I get it to scroll then flash 3 times?

<a href="#" class="rulesflash">Scroll To and Make Box Flash</a>

<div id="rules">
    <h3>Rules Section</h3>

    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>

And here is the JSFiddle

Answer 1

You'll want to use jQuery's animate() to handle the scroll and then the fade in and out functions to make it hide and show.

$(".rulesflash").click(function () {
    $('body').animate({
        scrollTop: $("#rules").offset().top
    }, 2000, function () {
        $("#rules").fadeOut();
        $("#rules").fadeIn();
        $("#rules").fadeOut();
        $("#rules").fadeIn();
        $("#rules").fadeOut();
        $("#rules").fadeIn();
    });
});

Demo : http://jsfiddle.net/Hhks4/1/

EDIT:

I looked at your post again and it looked like you wanted a highlight effect not a hide/show so I added changed my code to this.

$(".rulesflash").click(function () {
    $('body').animate({
        scrollTop: $("#rules").offset().top
    }, 2000, function () {
        $("#rules").effect("highlight", {}, 500);
        $("#rules").effect("highlight", {}, 500);
        $("#rules").effect("highlight", {}, 500);        
    });
});

http://jsfiddle.net/Hhks4/3/

P.S You need jQuery UI to call the .effect() method