Question

我设置了一些javascript，以便在我hover图像时，它会更改为不同的图像。唯一的问题是，它是即时的。如何为此添加过渡以使其平滑，在图像之间淡入淡出？

<div class="social">
    <ul class="sociallinks">
        <li>
            <a href="https://www.linkedin.com/in/lee-jordan">
                <img class="linkedinIcon" src="assets/images/linkedin.png" />
            </a>
        </li>
        <li>
            <a href="https://github.com/loxol">
                <img class="githubIcon" src="assets/images/github.png" />
            </a>
        </li>
    </ul>
</div>

$(document).ready(function() {
    $(".linkedinIcon").hover(function() {
        $(this).attr("src", "assets/images/linkedinhover.png");
    }, function() {
        $(this).attr("src", "assets/images/linkedin.png");
    });
});

Answer 1

您可以通过不同方式执行此操作，但在替换src时无法淡化相同的图像。您可以使用两个img标记，甚至可以将hover图像作为img标记的背景，并使用css transitions在悬停时淡出图像。这是一个例子：

$(function() {
    $(".linkedinIcon").hover(function() {
        $(this).css("opacity", 0);
    }, function() {
        $(this).css("opacity", 1);
    });
});

ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>

甚至可能没有JS，只有css：

ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}
ul.sociallinks img:hover {
  opacity: 0;
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>

Answer 2

这是一个简单的css3解决方案：

＆＃13;

ul.sociallinks a img {
  position: absolute;
  top: 0;
  height: 250px;
}
.animate {
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.changeDisplayOnHover .showOnHover {
  opacity: 0;
}
.changeDisplayOnHover .hideOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .showOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .hideOnHover {
  opacity: 0;
}

＆＃13;

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" class="changeDisplayOnHover">
        <img class="hideOnHover animate" src="https://66.media.tumblr.com/avatar_8107bb8004a8_128.png" />
        <img class="showOnHover animate" src="http://www.aqua-soft.org/forum/uploads/post-25-1229846653.png" />
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 3

使用CSS的2种效果：

CREATE FUNCTION check_table_ids()
RETURNS trigger AS
$$
DECLARE
   counter integer := (SELECT count(*) FROM table WHERE fk_id = NEW.fk_id AND status <> 'CANCELED');
BEGIN
   IF counter >= 2 THEN
       RAISE EXCEPTION 'The number of entries for "%" is greater or equal than 2', NEW.fk_id;
   END IF;

   RETURN NEW;
END;
$$ LANGUAGE plpgsql VOLATILE;

.changeableImage {
	background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
	display:block;
	width:300px;
	height:200px;
	transition: padding 2s;
	box-sizing:border-box;
	overflow: hidden;
}


.changeableImage:hover{
	padding-top:200px;
}


.changeableBG {
	background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
	display:block;
	width:300px;
	height:200px;
	transition: padding 2s;
	box-sizing:border-box;
	overflow: hidden;
}
.changeableBG img{
	display:block;
	width:300px;
	height:200px;
	transition: all 2s;
	box-sizing:border-box;
	overflow: hidden;
  position:relative;
}


.changeableBG img:hover{
	transform: translateY(200px);
}

在列表中的图像之间淡入淡出

3 个答案: