Skip to content

Instantly share code, notes, and snippets.

@aerith

aerith/gist:1197327

Created September 6, 2011 11:36
Show Gist options
  • Save aerith/1197327 to your computer and use it in GitHub Desktop.
Save aerith/1197327 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#sub {
margin: 20px;
}
.inner-content {
border: 1px solid #ccc;
padding: 4px 8px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var animationState = [];
$('#sub ul li').each(function (i) {
var self = $(this);
var content = $(document.createElement('div')).addClass('inner-content');
var background = $(document.createElement('div')).addClass('inner-background');
content.html(self.html()).css({
position: 'relative',
color: '#ffffff',
'z-index': '61000'
});
self.html('').css('position', 'relative').append(background).append(content);
background.text('&nbsp;').css({
overflow: 'hidden',
position: 'absolute',
background: '#000000',
width: self.width().toString() + 'px',
height: '0',
bottom: '0',
'text-indent': '-9999px'
});
self.mouseenter(function (event) {
background.stop().animate({
height: self.height().toString() + 'px'
}, 500);
});
self.mouseleave(function (event) {
background.stop().animate({
height: '0'
}, 500);
});
});
alert($('li[data-foo~="\\""]').length); // => 0
alert($('p[data-foo~="\\""]').length); // => 4
});
</script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="contents">
<div id="sub">
<ul>
<li data-foo="\"">aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li data-foo="hoge">aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li data-foo="hoge">aaaaaaaaaa</li>
</ul>
</div>
<div id="main">
<p data-foo='"'>aaaaaaaaaaa</p>
<p data-foo='"'>aaaaaaaaaaa</p>
<p data-foo='"'>aaaaaaaaaaa</p>
<p data-foo='"'>aaaaaaaaaaa</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment