jquery animate next and prev elements

Let's say I've a list like this:

<div>
  <span></span>
  <hr/>
  <span></span>
  <hr/>
  <span></span>
  <hr/>
  <span></span>
  <hr/>
  <span></span>
</div>

I need a code for the following:

All the hr elements has background-color:#color1.

On mouseover in a span element, the next and prev hr elements of it should animate (background color to #color2) while on mouseout these should animate to #color1 again.

the problem is that If for example I move from the 2nd to the 3rd span, the second hr is supposed it sohuldn't change the color because it's still one of the next / prev elements. I need an idea about how to detect if the hr element should change the color or not.

Thanks so much

---

While I agree with TJ (who is a total guru), I answered your question as is. What you are asking is rather independent of the elements involved:

Note that the <hr> color change works differently on Chrome or Firefox, as per this article:

Changing the color of an hr element

Firefox:

$('li').hover(
    function(){
        $(this).prev('hr').css('background-color','green');
        $(this).next('hr').css('background-color','green');
    },
    function(){
        $(this).prev('hr').css('background-color','red');
        $(this).next('hr').css('background-color','red');
    }
);

http://jsfiddle.net/fxrkdgz6/1/

---

Chrome (use border-color instead of background-color):

$('li').hover(
    function(){
        $(this).prev('hr').css('border-color','green');
        $(this).next('hr').css('border-color','green');
    },
    function(){
        $(this).prev('hr').css('border-color','red');
        $(this).next('hr').css('border-color','red');
    }
);

http://jsfiddle.net/fxrkdgz6

---

Hope your question is answered satisfactorily, and that you see Rodrigo's approach is a better overall solution for your menu.

---

You are looking for a hover effect. And the html you typed looks like a bad coded drop down menu but dont worry I understand what you need. Here is the code example for you

<ul>
  <li>
    Menu
    <ul>
      <li>Submenu</li>
      <li>Submenu</li>
      <li>Submenu</li>
    </ul>
  </li>
</ul>

This is the html, now the CSS

ul {
  width:200px;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {width:200px;
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width:200px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

And here I created a demo just for you

https://jsfiddle.net/r50kbnq7/

---

That can be done quite easily actually, just use css transitions. Use jQuery to add classes to the next and previous hr element, and let css do the rest! Just a few lines and you're done, check out this fiddle

HTML

    <div>
    <span></span>
    <hr/>
    <span></span>
    <hr/>
    <span></span>
    <hr/>
    <span></span>
    <hr/>
    <span></span>
</div>

CSS

span { display: block; height: 1em; background: #000; }
hr { transition: all 2s; height: 0.5em; }
hr.animate { background: red; border-color: red; }

JQuery

jQuery(document).ready(function($) {
    $('span')
        .on('mouseover', function(e) {
            var $this = $(this);
            var next = $this.nextUntil('span').eq(0);
            var prev = $this.prevUntil('span').eq(0);

            next.addClass('animate');
            prev.addClass('animate');
        })
        .on('mouseout', function(e) {
            var $this = $(this);
            var next = $this.nextUntil('span').eq(0);
            var prev = $this.prevUntil('span').eq(0);

            next.removeClass('animate');
            prev.removeClass('animate');
        });
});

链接地址: http://www.djcxy.com/p/15756.html

上一篇: 只有websafe颜色才能为<hr>造型？

下一篇: jquery动画下一个和prev元素